如何给所有父元素设置height:100%实现首页div高度铺满

问题根源 #

Docusaurus 框架的默认根容器#__docusaurus及上层的html、body元素默认高度由内容撑开，未明确绑定视口高度，直接给单个 DIV 设置height: 100%会因为父级高度未定义不生效；仅给#__docusaurus设置height: 100%会因为父级高度计算逻辑问题，出现内容溢出、滚动异常等问题。

可行配置方案 #

在项目全局自定义 CSS 文件中添加以下规则即可：

• 首先统一根层级高度基准

html, body, #__docusaurus {
  /* 直接绑定视口高度作为高度基准 */
  height: 100vh;
  /* 清除默认边距避免高度计算误差 */
  margin: 0;
  padding: 0;
  /* 解决内容溢出时的滚动异常问题 */
  overflow-y: auto;
}

• 给目标 DIV 配置高度规则
  若需要 DIV 最小占满全屏、内容超出时自动延伸高度，添加：
  min-height: 100%;
  若需要 DIV 固定占满当前视口高度、内容超出时内部滚动，添加：
  height: 100%;
  若目标 DIV 存在父级容器，需要同步给所有父级容器添加height: 100%属性。

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