Html 页面底部的空白区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16134122/
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
Blank space at the bottom of the page
提问by Vishal Khialani
Please visit this website.
请访问本网站。
There is a blank space at the bottom. I checked and there is no minimum height mentioned in my css.
底部有一个空白区域。我检查过，我的 css 中没有提到最小高度。
I suspect its the body css details as below;
我怀疑它的 body css 细节如下；
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
回答by
This removed the bleed for me in Safari 6.0.3;
这为我在 Safari 中消除了出血6.0.3；
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
您可能希望根据其中的内容以不同的方式处理该溢出。但这应该可以修复空白。
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
我通过从 DOM 自下而上删除节点来解决这个问题。它必须在#footer-wrapper. 由于 margin-bottom 不起作用并且您使用的是相对定位，我认为这是该元素中的一些阴影样式渗出。
Update (better fix)
更新（更好的修复）
Just found the real issue to the problem;
刚刚发现问题的真正问题；
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: ".";to content: "";and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
更改content: ".";为content: "";，它是固定的。或者完全删除该样式，因为在这种情况下它似乎没有用。
回答by Ayberk Baytok
"overflow: hidden"
makes things harder but try,
让事情变得更难，但要尝试，
"overflow: auto"
in order to be able to flow when you need.
以便能够在需要时流动。
回答by becker
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
我在这里的节目迟到了，但在我的情况下它可能对某人有所帮助我在顶部有一个空白空间我添加了 margin-top=-20px 现在底部的空白空间，尝试了我在这些上找到的几乎所有建议和许多线程，什么都没有。决定通过一些 HTML 验证器运行它，有一些没有人选择但在几个人发现标签末尾有一个额外的字符（`）之后，就是这样，所以这是用户的笨拙，拿了那个东西现在我的页面被移动了，取了负边距，一切都很好。所以尝试一个验证器并寻找这样的东西。
回答by Sumit Ghulyani
margin-bottom: 0px;
This would do it Btw ..nice site dude :)
这会做到顺便说一句..不错的网站伙计:)
回答by Luis Dalmolin
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
有时，由第三方服务创建的一些 iframe/对象会创建此空白空间。就我而言，谷歌 Adwords 和谷歌分析正在创造这个。所以，我通过添加这个 CSS 来删除：
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.
也许您需要为您的案例添加一些额外的规则。希望有帮助。
