带有粘性页脚的 100% 元素

Question

我正在使用 bootstrap V3。我已经看到工作代码提供了解决粘性页脚问题的方法，但这阻止了我在正文中使用任何我需要的 100% 高度的 div 元素。

有没有人知道不使用 javascript 就可以解决这个问题？

谢谢。

Answer 1

将 display: table 添加到您的父元素（如正文），然后在您的页脚添加

display:        table-row; 
vertical-align: bottom; 
height:         1px;

高度不会使页脚只有 1px 高，所以不用担心。

这就是我通常做的，在使用 bootstrap 时总是对我有用。

Answer 2

谢谢 Paul - 我修改了您的代码并向 body 元素添加了 100% 的高度，现在可以正常工作了。

    <html> 
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head> 
<body style="display:table;height:100%;">
<div style="height:100%;background-color:red;">
This is some content
</div>
<div id="footer" style="display:table-row; vertical-align: bottom; height:1px;">
This should be a sticky footer
</div>
</body>
</html>

带有粘性页脚的 100% 元素

100% elements with sticky footer

css

sticky-footer