Question

似乎有很多这种情况。这是一个简单的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/

Answer 1

问题是body元素上的100％高度规则。您有最小高度约束，所以只需删除它。

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

html{
  height: 100%;
}

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

Flex Box粘滞页脚内容溢出

1 个答案: