CSS 自动高度 div

在 CSS 中设置 div 元素的高度有时会很棘手，特别是在内容动态增加或布局需要响应式时。因此，我们需要一种方法来自动设置我们的 div 元素的高度，这就是 CSS 自动高度 div。

方法一：使用 Flexbox

Flexbox 是一种现代的 CSS 布局方式，它提供了许多强大的功能，其中之一就是自动调整子元素的高度以匹配父元素。使用 Flexbox，我们只需设置父元素的 display: flex; 属性即可。

.container {
  display: flex;
}

这会告诉浏览器将子元素设置为 Flexbox 布局，并自动调整其高度以匹配父元素。

方法二：使用 Grid

另一个现代的 CSS 布局方式是 Grid（网格布局），它也支持自动调整子元素的高度以匹配父元素。与 Flexbox 类似，我们只需将父元素设置为 display: grid; 即可。

.container {
  display: grid;
}

这会告诉浏览器使用网格布局，并自动调整子元素的高度以匹配父元素。

方法三：使用 position 和 top/bottom

如果你不想使用 Flexbox 或 Grid，可以使用 position 属性和 top 或 bottom 属性来使子元素自适应其父元素的高度。

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
}

这会告诉浏览器将子元素设置为绝对定位，并占据其父元素的所有可用空间。

以上是三种自动设置 div 元素高度的方法，分别是使用 Flexbox、Grid 和 position 属性。它们都是现代的 CSS 布局技术，可以让我们更轻松地创建响应式布局和自适应页面。