CSS中flex属性与height属性的区别及场景选择疑问

这是个非常实用的问题！在你给出的垂直flex布局结构里，flex: 1和height: 100%看似都能让中间的.body区域填充剩余空间，但它们的工作逻辑、适用场景有不少关键区别，我帮你逐一梳理：

先回顾你的示例代码 #

CSS 代码

.page { display: flex; flex-direction: column; }
.header { height: 100px; }
.body { 
  flex: 1; /* 这里对比 height: 100%; */
}
.footer { height: 40px; }

HTML 代码

<div class="page">
  <div class="header">Sample Header</div>
  <div class="body">Sample Body</div>
  <div class="footer">Sample Footer</div>
</div>

核心差异对比 #

• 父元素高度依赖不同

  • height: 100%的生效前提是父元素（.page）必须有明确的高度值（比如height: 100vh、固定像素值），因为百分比高度是基于父元素的计算高度来计算的。如果.page没有设置高度，.body的height: 100%完全不会生效，只会自适应内容高度。
  • flex: 1是flex子元素的专属属性，只要父元素是display: flex且设置了flex-direction: column，它就能自动占据容器内除了其他子元素（header、footer）之外的所有剩余空间，完全不需要父元素设置固定高度。

• 空间分配的灵活性不同

  • height: 100%是硬绑定父元素高度，一旦父元素高度变化（比如header/footer动态调整高度、父元素被其他页面元素挤压），.body会直接占满父元素，很容易出现内容溢出或者挤压其他子元素的问题。
  • flex: 1是参与flex容器的动态空间分配，它会优先保证header和footer的固定高度，再把剩下的所有可用空间全部分配给.body。哪怕header/footer高度在响应式场景下变化，.body也能自动适配剩余空间，不会出现布局错乱。

• 内容溢出的处理逻辑不同

  • 当.body内的内容超过自身高度时，height: 100%会让内容直接溢出整个.page容器（除非手动设置overflow），甚至可能导致整个页面滚动，而不是.body内部独立滚动。
  • 给设置了flex: 1的.body加上overflow: auto后，就能轻松实现header和footer固定、中间区域独立滚动的经典布局（比如后台管理系统、文档类页面），这是height: 100%很难做到的。

• 适用场景不同

  • height: 100%兼容性极强（几乎支持所有浏览器），但仅适合父元素高度固定且不会变化的简单场景。
  • flex: 1需要浏览器支持Flexbox（IE10及以上，现代浏览器全覆盖），但它的灵活性拉满，适合响应式布局、动态高度、需要自适应剩余空间的绝大多数现代页面场景。

总结 #

如果你倾向于用flex: 1，这个选择非常合理——它完全契合Flex布局的设计理念，减少了对固定高度的依赖，能更好地适配动态变化的布局场景。而height: 100%只适合一些高度固定的极简布局。

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