高度适应

如果你想让一个 HTML 元素的高度适应其内容，你可以使用 CSS 的 `height` 属性设置为 `auto`。这将使元素的高度根据它的内容自动调整。以下是一个例子：

<div style="background-color: blue; height: auto;">
  <p>This is some text inside a div.</p>
  <p>Here is some more text.</p>
</div>

在这个例子中，`div` 元素的高度被设置成 `auto`，因此它会根据内部的文本内容自动调整高度。你可以在这个元素中添加任何你想要的内容，高度都会自适应。

除了 `height` 属性，还有一些其他的 CSS 属性可以帮助你控制元素的高度，例如 `min-height` 和 `max-height`。这些属性可以让你限制元素的最小和最大高度，以避免内容溢出或元素过小。

相关问题

element-ui 使用v-infinite-scroll，高度适应页面大小

使用 `v-infinite-scroll` 实现无限滚动时，可以通过设置容器元素的高度来适应页面大小。具体做法如下：

1. 在容器元素上设置样式 `height: 100vh;`，使其高度占满整个页面。

2. 在 `v-infinite-scroll` 绑定的方法中，每次加载数据后，判断容器元素的高度是否小于页面高度。如果小于，则将容器元素的高度设置为页面高度，保证容器元素的高度和页面高度一致。

示例代码如下：

<template>
  <div class="container" v-infinite-scroll="loadData">
    <!-- 数据列表 -->
  </div>
</template>

<script>
export default {
  methods: {
    loadData() {
      // 加载数据
      // ...

      // 判断容器元素的高度是否小于页面高度
      const containerHeight = document.querySelector('.container').clientHeight;
      const windowHeight = window.innerHeight;
      if (containerHeight < windowHeight) {
        // 将容器元素的高度设置为页面高度
        document.querySelector('.container').style.height = windowHeight + 'px';
      }
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
  overflow: auto;
}
</style>

Bootstrap 3 高度自动适应屏幕

在 Bootstrap 3 中，如果要使元素的高度自动适应屏幕的高度，可以使用 CSS3 中的 `vh` 单位。`vh` 表示视口高度的百分之几，例如 `100vh` 表示视口的高度。

因此，我们可以将某个元素的高度设置为 `100vh`，这样该元素的高度就会自动适应屏幕的高度。例如：

<div style="height: 100vh;">
  <!-- 内容 -->
</div>

在上面的例子中，我们将一个 `div` 元素的高度设置为 `100vh`，这样该元素的高度就会自动适应屏幕的高度，从而实现了高度自动适应屏幕的效果。

需要注意的是，使用 `vh` 单位来设置高度可能会对布局产生一定的影响，因此在使用时需要谨慎。同时，在 Bootstrap 4 中，推荐使用 Flexbox 来实现高度自动适应屏幕。