如何防止中间的content区块（使用flex布局的div）覆盖页脚
编辑1
C3Roes的 fiddle就是我想要实现的效果。
不幸的是，对于我来说，内容DIV仍然扩展到100vh的极限，无法在页脚处停止。内容DIV继续在页脚之下，滚动条的最后一段被页脚遮挡。此外，还有点奇怪，由于Bootstrap或其他CSS的原因，page-wrapper DIV内的DIV/卡片似乎出现在页脚之上。
看起来我的Flex CSS是正确的，我似乎在page-wrapper上遇到了innerHTML/CSS的冲突。有人能确认吗？
结束1
如果你查看下面的HTML，你会看到BODY之下有一个Container DIV，其中包含Header、Wrapper和 FOOTER段。可惜的是，在我的情况中，Content wrapper并没有意识到Footer永久占用了4.5rem，因此它的可用/可滚动区域本应在那儿结束。
我现在在检查对齐选项，但找不到一个调杠杆来让wrapper知道100% 是要减去Footer的 4.5rem。
如果我把page-wrapper DIV的 flex-wrap设置为wrap，那么内容就会消失。
<body style="overflow: hidden; margin: 0;">
<div id="container-fluid" style="
display: flex;
flex-direction: column;
height: 100vh;
max-height: 100vh;
width: 100vw;
min-height: 0px;">
<div id="fixedHeader" style="
display: flex;
order: 1;
width: 100%;
height: 7.5rem;
max-height: 7.5rem;
align-items: center;
flex-direction: row;
flex-wrap: wrap;">
</div>
<div id="page-wrapper" style="
display: flex;
overflow: auto;
max-height: 100%;
min-height: auto;
order: 2;
width: 100%;
flex: 1 0 auto;">
</div>
<footer class="sticky-footer" id="_sticky-footer_ID_001" style="
display: flex;
order: 3;
height: 4.5rem;
min-height: 4.5rem;
flex-wrap: wrap;
width: 100%;
border-top: 1px solid #002f5f;">
</footer>
</div>
</body>
解决方案
如果我理解你的问题正确，你想让页脚固定在底部，只有内容区域是可滚动的。
我认为问题出在 page-wrapper 的样式上。
你可以尝试这样修改：
<div
id="page-wrapper"
style="
display: flex;
flex: 1;
overflow-y: auto;
order: 2; " >
</div>
之所以这样有效，是因为：
flex: 1让内容区域在弹性容器内占用剩余空间overflow-y: auto当内容溢出时使其可滚动display: flex保持布局的灵活性与一致性order: 2用于控制弹性项目的布局顺序
希望这能帮到你，你可以试试看。
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。
相关文章
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。