尽管有 min-height 和 height 标签，但页面底部的 CSS 空白

CSS white space at bottom of page despite having both min-height and height tag

提问by Jedediah Shumaker

I am unable to get the white space at the bottom of this page to disappear. I have both min-height and height tags in body. Any suggestions? Thanks!

我无法让此页面底部的空白消失。我在 body 中有 min-height 和 height 标签。有什么建议？谢谢！

http://womancareolympia.webs.com/

http://womancareolympia.webs.com/

采纳答案by natedavisolds

The problem is how 100% height is being calculated. Two ways to deal with this.

问题是如何计算 100% 的高度。两种方法来处理这个。

Add 20px to the body padding-bottom

将 20px 添加到 body padding-bottom

body {
    padding-bottom: 20px;
}

or add a transparent border to body

或为正文添加透明边框

body {
    border: 1px solid transparent;
}

Both worked for me in firebug

两者都在萤火虫中为我工作

In defense of this answer

为这个答案辩护

Below are some comments regarding the correctness of my answer to this question. These kinds of discussions are exactly why stackoverflow is so great. Many different people have different opinions on how best to solve the problem. I've learned some incredible coding style that I would not have thought of myself. And I've been told that readers have learned something from my style from time to time. Social coding has really encouraged me to be a better programmer.

以下是关于我对这个问题的回答的正确性的一些评论。这些类型的讨论正是 stackoverflow 如此出色的原因。许多不同的人对如何最好地解决问题有不同的看法。我学到了一些我自己都不会想到的令人难以置信的编码风格。有人告诉我，读者不时从我的风格中学到一些东西。社交编码真的鼓励我成为一个更好的程序员。

Social coding can, at times, be disturbing. I hate it when I spend 30 minutes flushing out an answer with a jsfiddle and detailed explanation only to submit and find 10 other answers all saying the same thing in less detail. And the author accepts someone else's answer. How frustrating! I think that this has happend to my fellow contributors–in particular thirtydot.

社交编码有时会令人不安。当我花了 30 分钟用 jsfiddle 和详细解释冲洗出一个答案时，我讨厌它只提交并找到 10 个其他答案，所有答案都不太详细地说明了同样的事情。并且作者接受了别人的回答。多么令人沮丧！我认为这已经发生在我的其他贡献者身上——尤其是三十点。

Thirtydot's answer is completely legit. The paround the scriptis the culprit in this problem. Remove it and the space goes away. It also is a good answer to this question.

Thirtydot 的回答是完全合法的。在p周围的script是这个问题的罪魁祸首。取下它，空间就消失了。这也是对这个问题的一个很好的回答。

But why? Shouldn't the ptag's height, padding and margin be calculated into the height of the body?

但为什么？如果没有p标签的高度，填充和利润率来计算进入人体的身高是多少？

And it is! If you remove the padding-bottom style that I've suggested and then set the body's background to black, you will see that the body's height includes this extra pspace accurately (you see the strip at the bottom turn to black). But the gradient fails to include it when finding where to start. This is the real problem.

它是！如果您删除我建议的 padding-bottom 样式，然后将主体的背景设置为黑色，您将看到主体的高度p准确地包含了这个额外的空间（您会看到底部的条带变为黑色）。但是在找到从哪里开始时，渐变未能包含它。这是真正的问题。

The two solutions that I've offered are ways to tell the browser to calculate the gradient properly. In fact, the padding-bottom could just be 1px. The value isn't important, but the setting is. It makes the browser take a look at where the body ends. Setting the border will have the same effect.

我提供的两个解决方案是告诉浏览器正确计算梯度的方法。实际上，padding-bottom 可能只是 1px。值不重要，但设置很重要。它使浏览器查看正文的结束位置。设置边框将具有相同的效果。

In my opinion, a padding setting of 20px looks the best for this page and that is why I answered it this way. It is addressing the problem of where the gradient starts.

在我看来，20px 的内边距设置看起来最适合这个页面，这就是我这样回答的原因。它正在解决梯度从哪里开始的问题。

Now, if I were building this page. I would have avoided wrapping the script in a p tag. But I must assume that author of the page either can't change it or has a good reason for putting it in there. I don't know what that script does. Will it write something that needs a p tag? Again, I would avoid this practice and it is fine to question its presence, but also I accept that there are cases where it must be there.

现在，如果我正在构建这个页面。我会避免将脚本包装在 ap 标签中。但我必须假设该页面的作者要么无法更改它，要么有充分的理由将它放在那里。我不知道那个脚本是做什么的。它会写一些需要 ap 标签的东西吗？同样，我会避免这种做法，可以质疑它的存在，但我也接受在某些情况下它必须存在。

My hope in writing this "defense" is that the people who marked down this answer might consider that decision. My answer is thought out, purposeful, and relevant. The author thought so. However, in this social environment, I respect that you disagree and have a right to degrade my answer. I just hope that your choice is motivated by disagreement with my answer and not that author chose mine over yours.

我写这个“辩护”的希望是标记这个答案的人可能会考虑这个决定。我的回答是经过深思熟虑的、有目的的和相关的。作者是这么想的。但是，在这样的社会环境下，我尊重你的不同意，也有权贬低我的回答。我只是希望你的选择是出于不同意我的答案，而不是那个作者选择了我的而不是你的。

回答by thirtydot

I find it quite remarkable that out of 6 answers, none of them have mentioned the real source of the problem.

我发现非常了不起的是，在 6 个答案中，没有一个提到问题的真正根源。

Collapsing marginson the last pinside #fw-footeris where that extra space is originating from.

最后一个p内侧的折叠边距#fw-footer是额外空间的来源。

A sensible fix would be to add overflow: hiddento #fw-footer(or simply add margin: 0on the last p).

一个明智的解决方法是添加overflow: hidden到#fw-footer（或简单地添加margin: 0到最后一个p）。

You could also just move the scriptinside that last poutside of the p, and then remove the pentirely; there's no need to wrap a scriptin a p. The first p(#fw-foottext) has margin: 0applied, so the problem won't happen with that one.

您也可以将 的script最后一个内部移动到p外部p，然后p完全删除；没有必要将 a 包装script在 a 中p。第一个p( #fw-foottext) 已margin: 0应用，因此该问题不会发生在那个上。

---

---

As an aside, you've broken the fix I gave you in this question:

顺便说一句，你已经破坏了我在这个问题中给你的修复：

CSS3 gradient background with unwanted white space at bottom

CSS3 渐变背景，底部有不需要的空白

You need html { height: 100% }and body { min-height: 100% }.

你需要html { height: 100% }和body { min-height: 100% }。

At the moment, you have html { height: auto }being applied, which does not work:

目前，您已html { height: auto }被申请，这不起作用：

(This happens with a window taller than the content on the page)

（发生这种情况的窗口比页面上的内容高）

回答by B Cronyn

I had white space at the bottom of all my websites; this is how I solved the matter:

我所有网站的底部都有空白区域；这就是我解决问题的方法：

the first and best thing you can do when you are debugging css issues like this is to add:

当您调试像这样的 css 问题时，您可以做的第一件事也是最好的事情是添加：

*{ border: 1px solid red; }

*{ 边框：1px 纯红色；}

this css line puts a red box around all your css elements.

此 css 行在所有 css 元素周围放置一个红色框。

I had white space at the bottom of my page due to a faulty chrome extension which was adding the div 'dp_swf_engine' to the bottom of my page:

由于错误的 chrome 扩展程序将 div 'dp_swf_engine' 添加到我的页面底部，我的页面底部有空白区域：

without the red box, I would have never noticed a 1px div. I then got rid of the faulty extension, and put 'display:none' on #dp_swf_engine as a secondary measure. (who knows when it could come back to add random white space at the bottom of my page for all my pages and apps?!)

如果没有红框，我永远不会注意到 1px div。然后我摆脱了错误的扩展名，并将“display:none”放在#dp_swf_engine 上作为辅助措施。（谁知道它什么时候可以回来为我的所有页面和应用程序在我的页面底部添加随机空白？！）

回答by yu yang Jian

Try setting the height of the html element to 100% as well.

尝试将 html 元素的高度也设置为 100%。

html {
    min-height: 100%;
    overflow-y: scroll;
}    
body {
     min-height: 100%;
}

Reference from this answer..

参考这个答案。.

回答by Jose Faeti

This will remove the margin and padding from your page elements, since there is a paragraph with a script inside that is causing an added margin. this way you should reset it and then you can style the other elements of your page, or you could give that paragraph an id and set margin to zero only for it.

这将从您的页面元素中删除边距和填充，因为有一个带有脚本的段落会导致添加边距。通过这种方式，您应该重置它，然后您可以为页面的其他元素设置样式，或者您可以为该段落指定一个 id 并将边距设置为零。

<style>
* {
   margin: 0;
   padding: 0;
}
</style>

Try to put this as the first style.

尝试将其作为第一种样式。

回答by DisgruntledGoat

The problem is the background image on the htmlelement. You appear to have set it to "null" which is not valid. Try removing that CSS rule entirely, or at least setting background-image:none

问题是html元素上的背景图像。您似乎已将其设置为无效的“null”。尝试完全删除该 CSS 规则，或至少设置background-image:none

EDIT: the CSS file says it is "generated" so I don't know exactly what you will be able to edit. The problem is this line:

编辑：CSS 文件说它是“生成的”，所以我不知道你到底能编辑什么。问题是这一行：

html { background-color:null !important; background-position:null !important; background-repeat:repeat !important; background-image:url('http://images.freewebs.com/Images/null.gif') !important; }

I'm guessing you've put null as a value and it has set the background to a GIF called 'null'.

我猜你已经把 null 作为一个值，它已经将背景设置为一个名为“null”的 GIF。

回答by Ahsan Rathod

It is happening Due to:

它的发生是由于：

<p><script>var _nwls=[];if(window.jQuery&&window.jQuery.find){_nwls=jQuery.find(".fw_link_newWindow");}else{if(document.getElementsByClassName){_nwls=document.getElementsByClassName("fw_link_newWindow");}else{if(document.querySelectorAll){_nwls=document.querySelectorAll(".fw_link_newWindow");}else{document.write('<scr'+'ipt src="http://static.websimages.com/static/global/js/sizzle/sizzle.min.js"><\/scr'+'ipt>');if(window.Sizzle){_nwls=Sizzle(".fw_link_newWindow");}}}}var numlinks=_nwls.length;for(var i=0;i<numlinks;i++){_nwls[i].target="_blank";}</script></p>

Remove <p></p>around the script.

删除<p></p>脚本周围。

回答by shanethehat

There is a second paragraph in your footer that contains a script. It is this that is causing the issue.

页脚中有第二段包含脚本。正是这个问题导致了这个问题。

回答by Rachel

(class/ID):after {
content:none;
}

Always works for me class or ID can be for a div or even body causing the white space.

始终适用于我的类或 ID 可以用于 div 甚至导致空白的正文。

回答by realIsComplex

I faced this issue because my web page was zoomed out to 90% and as I was viewing my page in responsive mode through the browser developer tools, I did not notice it right away.

我遇到这个问题是因为我的网页被缩小到 90%，当我通过浏览器开发人员工具以响应模式查看我的页面时，我没有立即注意到它。