Html 如何摆脱底部的空白？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6273032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of the whitespace at the bottom?
提问by thebitguru
Can someone please help me eliminate the extra whitespace at the bottom of this website? http://www.vonlay.com/
有人可以帮我消除本网站底部的多余空白吗？ http://www.vonlay.com/
This image shows what I am trying to remove: http://img691.imageshack.us/img691/8837/screenshot20110607at715.png
这张图片显示了我想要删除的内容：http: //img691.imageshack.us/img691/8837/screenshot20110607at715.png
Here is how I have the footer setup.
这是我如何设置页脚。
html, body { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }
#footer { position: relative; height: 140px; z-index: 10; clear: both;
margin-top: -140px; background: #700; color: #fff; }
回答by thirtydot
You should add:
你应该添加：
#footer .content p {
margin-bottom: 0
}
I actually wrote another answer before that one that explains what's going on properly, with an alternative fix, here it is:
实际上，我在该答案之前写了另一个答案，解释了正确的情况，并提供了替代解决方案，这里是：
You should add overflow: hiddento #footer.
你应该添加overflow: hidden到#footer.
This will resolve the problem, which is that the marginon the pelement inside <div class="copyright-notice">is collapsing through #footer. See: collapsing margins.
这将解决问题，即内部元素margin上的正在崩溃。请参阅：折叠边距。p<div class="copyright-notice">#footer
If this seems unlikely to you, try adding this, just to see what happens:
如果您觉得这不太可能，请尝试添加它，看看会发生什么：
#footer .content p {
margin-bottom: 200px
}
回答by Michael Robinson
Try increasing the height of your footer:
尝试增加页脚的高度：
#footer { height: 145px; }
回答by trutheality
Try setting padding and/or margin on the bottom to zero for the footer and/or body.
尝试将页脚和/或正文的底部填充和/或边距设置为零。
回答by kinakuta
Try using positioning:
尝试使用定位：
#footer {
position: absolute;
bottom: 0;
}
回答by Phphelp
in the footer class change
在页脚类更改中
height: 160px;
try....
尝试....
回答by Oluwatobi Omotayo
Try this: Add a wrapper around every HTML element in your "body" element, excluding the footer, then in CSS do this:
试试这个：在“body”元素中的每个 HTML 元素周围添加一个包装器，不包括页脚，然后在 CSS 中执行以下操作：
.wrapper {
min-height: calc(100vh -<your-footer-height>px);
}
You don't have to add any styling to the footer since it's not in the wrapper. so the content just takes the viewport height of the device screen.
您不必向页脚添加任何样式，因为它不在包装器中。所以内容只需要设备屏幕的视口高度。
回答by Richard
put this in your section CSS
把它放在你的 CSS 部分
min-height: 100vh;
