Div高度设置不响应问题：#main-content设置100vh不生效如何解决？

• 补充根元素高度声明
  当前代码中的html、body未设置明确高度，部分浏览器渲染时会导致子元素的高度规则无法正常生效，修改对应CSS代码即可：

html, body {
position: relative;
scroll-behavior: smooth;
height: 100%; /* 新增该行 */
}

• 排查CSS优先级冲突
  打开浏览器开发者工具，选中#main-content元素，查看计算样式中的height属性：如果100vh的设置被划去，说明存在更高优先级的规则覆盖了当前设置，调整对应规则的选择器优先级即可解决。
• 验证高度渲染效果
  可以给#main-content添加临时背景色，直观确认高度是否生效：

#main-content {
width: 100%;
height: 100vh;
overflow: hidden;
background-color: red; /* 确认高度生效后可删除该行 */
}

如果背景色铺满整个浏览器视口高度，说明高度设置已经生效，你看到的“无响应”可能是overflow: hidden隐藏了超出部分的内容导致的视觉误解。

• 排查外层容器规则
  如果你提到的包裹所有页面内容的Div是#main-content的父元素，需要确认该外层容器没有设置不支持高度声明的属性（如display: inline），也没有高度为0的规则限制，对应调整即可。

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