如何根据div内文本量动态将其高度适配为60px、80px或100px

原有代码核心问题 #

1. CSS固定了height: 60px，强制限制了容器高度，无法随内容自然撑开
2. JS逻辑错误：你读取的是容器当前已经设置的高度，而非内部内容实际需要的高度，判断条件也写反了，永远只会返回60px的设置
3. JS函数缺少闭合大括号，存在语法错误

方案1：纯CSS简易实现（自适应高度区间） #

如果你不需要严格固定为60/80/100三个档位，只需要最小高度60px、最大高度100px、内容少时不占多余空间，直接修改CSS即可：

#header {
  /* 替换原有的height:60px */
  min-height: 60px;
  max-height: 100px;
  height: auto;
  width: 100%;
  background-color: #f4f6f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box; /* 避免padding把容器总宽度撑超 */
  overflow: hidden; /* 内容超过100px时隐藏溢出部分，不需要可以删除 */
}

方案2：JS实现严格三档高度切换 #

如果必须根据内容量严格切换为60/80/100三个固定高度，按以下修改：

修改CSS

移除固定高度设置：

#header {
  width: 100%;
  background-color: #f4f6f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

替换JS代码

function adjustHeaderHeight() {
  const header = document.getElementById('header')
  // 临时设为auto获取内容实际需要的高度
  header.style.height = 'auto'
  const actualHeight = header.scrollHeight
  // 根据实际高度匹配档位
  if (actualHeight <= 60) {
    header.style.height = '60px'
  } else if (actualHeight <= 80) {
    header.style.height = '80px'
  } else {
    header.style.height = '100px'
  }
}
// 页面加载完成后执行
window.addEventListener('load', adjustHeaderHeight)
// 如果内容会动态更新，内容变化时手动调用adjustHeaderHeight()即可

内容的提问来源于stack exchange，提问作者AntoMac