在CSS中，如果想让`div`的高度自动适应其内容，可以通过以下几种方式实现：
1. 不设置高度（默认行为）
最简单的方法就是不在CSS中为`div`指定高度。这样，`div`会自动扩展以适应其包含的所有内容。
.auto-height {
/* 其他样式 */
width: 200px; /* 可以设置宽度，如果需要的话 */
}
2. 使用`auto`值
可以在CSS中明确设置高度为`auto`，尽管这通常是默认行为。
.auto-height {
height: auto;
width: 200px; /* 可以设置宽度，如果需要的话 */
}
3. 使用百分比
如果父元素的高度是固定的，也可以使用百分比来设置`div`的高度，但这并不是让`div`自适应其内容，而是相对于父元素的高度。
.parent {
height: 300px; /* 父元素的高度是固定的 */
}
.auto-height {
height: 50%; /* 子元素的高度是父元素高度的50% */
}
4. 使用`min-height`和`max-height`
如果需要限制`div`的最小或最大高度，可以使用`min-height`和`max-height`属性。
.auto-height {
min-height: 100px; /* div的最小高度 */
max-height: 300px; /* div的最大高度 */
width: 200px; /* 可以设置宽度，如果需要的话 */
}
5. 利用Flexbox
使用Flexbox布局可以更灵活地控制`div`的高度。如果父元素设置为Flex容器，并且不设置其高度，子元素`div`的高度可以自动适应内容。
.flex-container {
display: flex;
/* 其他样式 */
}
.auto-height {
/* 子元素的高度会根据内容自动调整 */
}
6. 利用Grid布局
类似于Flexbox，Grid布局也允许`div`的高度自动适应内容。
.grid-container {
display: grid;
/* 其他样式 */
}
.auto-height {
/* 子元素的高度会根据内容自动调整 */
}
通过上述方法，可以轻松实现`div`的高度自动适应其内容，选择合适的方法取决于具体的项目需求以及布局结构。在大多数情况下，简单的不设置高度或者使用`auto`就可以满足需求。如果需要更复杂的布局控制，可以考虑使用Flexbox或Grid布局。