Flex Box 粘滞页脚内容溢出
Posted
技术标签:
【中文标题】Flex Box 粘滞页脚内容溢出【英文标题】：Flex Box Sticky Footer Content Overflow 【发布时间】：2014-11-27 19:06:45 【问题描述】：周围似乎有很多这样的东西。这是一个简单的 jsfiddle，其中页脚粘在底部，但是当内容溢出时，页脚不会移动到底部。当内容展开时，我希望页脚移动到底部。
html:
<body>
<div id="header">This is a Header</div>
<div id="content">asdfasdfasdfadsf
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>dasdfsfsa
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>dasdfsfsa
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>dasdfsfsa
</div>
<div id="footer">This is a Footer</div>
</body>
css:
html, body
height: 100%;
body
min-height: 100vh;
display: flex;
flex-direction: column;
#header
background-color: red;
min-width: 100%;
#content
background-color: white;
flex: 1;
#footer
background-color: blue;
http://jsfiddle.net/deadpickle/njvzjgje/2/
【问题讨论】：
页眉和页脚的高度是动态的还是固定的？ 我想是动态的。在我自己的东西中，标题通常是百分比高度。 我认为您混淆了 flex 模型的用途。如果你想要内容溢出，那么你就放弃 flex 模型（或在其他元素中使用它）。此外，在 body 上使用 flex 可能会导致非常意想不到的结果，除非您使用极其简单和“裸”的布局 所以如果我想要一个粘性页脚，我不应该使用弹性框吗？ 【参考方案1】：问题是您在 body 元素上的 100% 高度规则。你有最小高度限制，所以只需删除它。
但是，如果您想在 Safari 5.x（不支持 vh 单位）上进行这项工作，请在 html 上保留 100% 高度。所以你应该有这样的东西：
html
height: 100%;
html, body
min-height: 100%; // older browser
min-height: 100vh;
【讨论】：
以上是关于Flex Box 粘滞页脚内容溢出的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的 Flexbox 粘滞页脚在 Safari 中不起作用？