Flex Box 粘滞页脚内容溢出答案

【问题标题】：Flex Box Sticky Footer Content OverflowFlex Box 粘滞页脚内容溢出
【发布时间】：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 可能会导致非常意想不到的结果，除非您使用极其简单和“裸”的布局
所以如果我想要一个粘性页脚，我不应该使用弹性框吗？

标签： html css footer sticky

【解决方案1】：

问题是您在 body 元素上的 100% 高度规则。你有最小高度限制，所以只需删除它。

但是，如果您想在 Safari 5.x（不支持 vh 单位）上进行这项工作，请在 html 上保留 100% 高度。所以你应该有这样的东西：

html{
  height: 100%;
}

html, body{  
  min-height: 100%;  // older browser
  min-height: 100vh;
}

【讨论】：