CSS 如何使一个div自动调整高度以适应容器

在本文中，我们将介绍如何使用CSS来使一个div元素根据其容器自动调整高度。

阅读更多：CSS 教程

使用flexbox布局

Flexbox是CSS中一种强大的布局模型，它可以很方便地控制元素的布局和大小。通过使用flexbox布局，我们可以让一个div元素自动调整其高度以适应其容器。

要使用flexbox布局，我们需要将div的容器设置为display: flex。然后，我们可以使用flex-grow属性来指定每个子元素的伸展比例。这样，当容器的高度改变时，子元素的高度也会相应改变。

下面是一个例子：

<style>
.container {
  display: flex;
}
#div1, #div2, #div3 {
  flex-grow: 1;
}
</style>

<div class="container">
  <div id="div1">内容1</div>
  <div id="div2">内容2</div>
  <div id="div3">内容3</div>
</div>

在上面的例子中，div1、div2和div3的高度会自动调整以填充其父容器。

使用绝对定位

另一种方法是使用绝对定位来使div自动调整其高度以适应其容器。通过将div的position属性设置为absolute，并将其top和bottom属性设置为0，我们可以让div填充其父容器的高度。

下面是一个例子：

<style>
.container {
  position: relative;
}
#div1 {
  position: absolute;
  top: 0;
  bottom: 0;
}
</style>

<div class="container">
  <div id="div1">内容</div>
</div>

在上面的例子中，div1的高度会自动调整以填充其父容器。

使用JavaScript

如果以上方法不能满足需求，我们还可以使用JavaScript来动态计算和设置div的高度。

<script>
function resizeDiv() {
  var container = document.querySelector('.container');
  var div = document.querySelector('#div1');
  div.style.height = container.clientHeight + 'px';
}

window.addEventListener('resize', resizeDiv);
</script>

<div class="container">
  <div id="div1">内容</div>
</div>

上面的例子中，我们使用JavaScript编写了一个函数resizeDiv，它会在窗口大小改变时被调用。函数会获取容器和div的元素，并将div的高度设置为容器的高度。