CSS如何实现内容区随着屏幕自动拉伸_利用flex布局实现-css教程-PHP中文网

height: 100%不生效是因为父容器无明确高度，需显式设置html/body的height或min-height；flex: 1仅在flex容器有剩余空间时生效，须配合flex-direction、容器占满父级及避免内容区设height。

css如何实现内容区随着屏幕自动拉伸_利用flex布局实现

flex布局里，为什么`height: 100%`经常不生效

因为height: 100%依赖父容器有明确高度，而HTML默认的html和body没有设置高度时，子元素设100%就等于0。这不是flex的问题，是CSS继承规则本身决定的。

必须显式给html和body加height: 100%或min-height: 100vh
如果父容器用display: flex但没设height或min-height，子项的flex: 1也会“没地方可伸”
注意vh单位在移动端可能因地址栏显示/隐藏导致抖动，100vh不等于“安全可视区”

用`flex: 1`撑满内容区的正确写法

flex: 1不是万能填充符，它只在flex容器内、且容器主轴方向上有剩余空间时才起作用。常见错误是忘了设flex-direction或容器没占满父级。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

外层容器需设display: flex + flex-direction: column（垂直拉伸场景）
头部/尾部用固定高度（如height: 60px），中间内容区用flex: 1
避免给内容区设height或max-height，否则会压制flex: 1的伸展行为

示例结构：

<div style="display: flex; flex-direction: column; height: 100vh;">
  <header>Header</header><main style="flex: 1; overflow-y: auto;">Content</main><footer>Footer</footer>
</div>

滚动区域卡在内容区内部还是整个页面

这取决于你把overflow加在哪一层。加在main上，滚动条只包内容；加在body上，整个页面滚——但后者会让头部/尾部跟着动，通常不是想要的效果。

想让头部/尾部固定、仅中间滚动：给main加overflow-y: auto，并确保main有明确的flex生长空间
如果main里内容很少，overflow-y: auto不会出滚动条；需要配合min-height: 0防止flex子项最小高度干扰（尤其内部还有嵌套flex时）
在Safari中，overflow-y: auto对flex子项的支持曾有bug，稳妥起见可加min-height: 0兜底