我经常使用空div 的方法让页脚停留在页面底部。代码思路如下:
<body>
<div id="canevas">
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
CSS:
html, body {
height: 100%;
margin:auto;
}
#canevas {
min-height: 100%;
height: auto;
margin-bottom: -33px;
}
#footer, #push {
height: 33px;
}
今天我正在寻找如何在我的 #caneva div 上添加 margin-top 而不会破坏页脚。你有什么想法吗？
请注意，我的页面内容可以有许多不同的大小(比屏幕高度的 100% 少很多)。
Here a fiddle与以前的代码。
最佳答案
如果使用 padding-top是一个选项，你可以使用 box-sizing: border-box计算框的宽度和高度，包括padding和border，如下所示:
#canevas {
min-height: 100%;
margin-bottom: -33px;
padding-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
还值得注意的是 border-box 值 is supported on IE8+ .
或者，您可以添加另一个 spacer 元素作为 #canevas 元素的第一个子元素来下推内容，如下所示:
.spacer {
height: 50px;
}
<body>
<div id="canevas">
<div class="spacer"></div>
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
这将有一个有前途的浏览器支持:)
有关更多信息，您可以在此处引用我对 SO 上类似问题的回答:
关于html - 将页脚推到页面底部，顶部留出空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22363923/