如何设置body高度：兼具可继承性与min-height特性？

方法一：使用CSS Grid 布局（无需全局Flex） #

这是最可靠的方案，既满足body填满视口且随内容扩展，又能让子元素的height:100%正常生效：

html {
  margin: 0; /* 清除默认边距，避免出现滚动条或空白 */
}
body {
  min-height: 100vh;
  display: grid;
  background: #你的背景色; /* 替换为你的实际背景色 */
}
.column {
  height: 100%; /* 子元素占满body高度 */
}
/* 深层子元素继承高度 */
.column .deep-child {
  height: 100%;
}

原理说明： #

当body设置为display: grid后，子元素会自动填充网格容器的可用空间。此时即使body用min-height:100vh，子元素的height:100%也会基于body的实际高度（无论是视口高度还是内容扩展后的高度）计算，完美解决了纯min-height导致子元素高度失效的问题。

方法二：结合height与min-height的传统方案 #

如果不想用Grid，也可以通过给html和body叠加设置来实现：

html {
  height: 100%;
  margin: 0;
}
body {
  height: 100%;
  min-height: 100vh;
  background: #你的背景色;
}
.column {
  height: 100%;
}
.column .deep-child {
  height: 100%;
}

原理说明： #

• html设置height:100%让其高度等于视口，作为body的高度参考
• body同时设置height:100%（保证子元素height:100%有明确的参考高度）和min-height:100vh（当内容超过视口时，自动扩展高度）
• 这种方案依赖CSS中min-height优先级高于height的规则，当内容超出视口时，body的实际高度会自动适配内容，同时子元素的height:100%依然有效

为什么之前的方案失效？ #

• 直接用height:100vh：body高度被固定为视口高度，内容超出时背景色自然被截断
• 仅用min-height:100vh：父元素没有明确的height值，子元素的height:100%无法确定参考高度，因此不生效
• height: minmax(100vh, fit-content)：该语法仅在Grid/Flex的轨道定义中有效，直接给元素设置不生效

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