如何使用 CSS 使 div 高度随其内容扩展？

在开发过程中，我们需要让 div 的高度跟随其内容自动扩展。这种情况通常在展示有动态数据的列表或者是评论框中使用。实现这种效果的一个解决方案就是使用 CSS 调整 div 的高度。

使用 CSS 调整 div 高度

要使 div 的高度随其内容扩展，我们可以使用以下两种方法：

1. 使用 display: inline-block

通过将 div 的 display 属性设置为 inline-block，可以使其高度自适应其内容。下面是一个示例：

div {
  display: inline-block;
}

2. 使用 height: fit-content

通过将 div 的 height 属性设置为 fit-content，可以使其高度自适应其内容。下面是一个示例：

div {
  height: fit-content;
}

兼容性问题

需要注意的是，这两种方法可能会在一些旧版本的浏览器中不被支持。如果在旧版本浏览器中出现了问题，可以使用 JavaScript 实现自适应高度。

结论

使用 CSS 调整 div 的高度可以很方便地实现自适应高度效果。不同的项目中可以根据项目需求采用不同的方式。