将页脚推到页面底部，顶部有一个边距
[英]Pushing the footer at the bottom of my page with a margin at the top
问题描述
我经常使用空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％）。
2 个解决方案
解决方案1
2 已采纳 2014-03-12 21:25:36
如果使用padding-top是一个选项，您可以使用box-sizing: border-box来计算box-sizing: border-box的宽度和高度 ，包括填充和边框 ，如下所示：
#canevas {
min-height: 100%;
margin-bottom: -33px;
padding-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
工作演示 。
另外值得注意的是IE8 +支持 border-box值。
或者，您可以添加另一个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>
这将有一个很有前途的浏览器支持:)
更新的演示 。
有关详细信息，您可以在此处参考类似问题的答案：
解决方案2
0 2014-03-12 21:22:40
为什么我的页脚位于视口的底部而不是页面的底部？
[英]Why is my footer at the bottom of the viewport and not the bottom of the page?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.