在HTML代码中,为要自动展开的div元素添加一个最小高度,而不是一个固定的高度。然后,使用JavaScript来计算该元素的内容的实际高度,并将该高度应用于div元素。这样,当内容增加时,div元素将自动展开以适应内容。
HTML代码示例:
JavaScript代码示例:
// 获取所有拥有“auto-expand”类别的div元素
const autoExpandDivs = document.querySelectorAll('.auto-expand');
// 循环处理每个div元素
autoExpandDivs.forEach((div) => {
// 使用scrollHeight属性计算元素的实际高度
const contentHeight = div.scrollHeight;
// 将计算出的高度应用于元素的样式
div.style.height = contentHeight + 'px';
});