Question

我正在使用bootstrap V3。我已经看到了工作代码，它提供了粘性页脚问题的解决方案，但这使我无法在正常情况下使用任何具有100％高度的div元素。

有没有人知道这个问题的任何解决方案而不使用任何javascript？

感谢。

Answer 1

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

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

高度不会使页脚仅1px高，所以不要担心。

这就是我通常所做的事情，在使用bootstrap时总能为我工作。

Answer 2

谢谢保罗 - 我修改了你的代码并为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％元素与粘性页脚

2 个答案: