CSS空白在页面的底部，尽管有min-height和height标签 [英] CSS white space at bottom of page despite having both min-height and height tag
问题描述
我无法取得此网页底部的空白消失。我在身体里有min-height和height标签。有什么建议么？谢谢！
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!
http://womancareolympia.webs.com/
http://womancareolympia.webs.com/
推荐答案
问题是如何计算100％的高度。两种处理方式。
The problem is how 100% height is being calculated. Two ways to deal with this.
向body padding-bottom添加20px
Add 20px to the body padding-bottom
body {
padding-bottom: 20px;
}
或向身体添加透明边框
body {
border: 1px solid transparent;
}
在firebug中都适用于我
Both worked for me in firebug
以下是关于我对这个问题的答案的正确性的一些意见。这些种类的讨论正是为什么stackoverflow是如此伟大。许多不同的人对如何最好地解决问题有不同的意见。我学到了一些令人难以置信的编码风格，我不会想到自己。我已经被告知读者已经不时地从我的风格中学到了东西。社交编码真的鼓励我成为一个更好的程序员。
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.
社交编码有时会令人不安。我讨厌它，当我花30分钟冲出一个答案与一个jsfiddle和详细的解释只提交和找到10其他答案都说同样的事情在较不详细。作者接受别人的回答。多么令人沮丧！我认为这对我的同行贡献者，特别是三十多岁。
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.
Thirtydot的答案是完全合法的。 脚本周围的 p 是此问题的罪魁祸首。删除它，空间消失。这也是这个问题的好回答。
Thirtydot's answer is completely legit. The p around the script is the culprit in this problem. Remove it and the space goes away. It also is a good answer to this question.
但是为什么？不应该将 p 标签的高度，填充和边距计算到身高的高度吗？
But why? Shouldn't the p tag'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 p space 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可以只是1px。该值不重要，但设置为。它使浏览器看看身体结束的地方。设置边框将产生相同的效果。
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.
在我看来，20px的填充设置看起来最适合此页面，这就是为什么我这样回答。它正在解决渐变开始的问题。
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.
现在，如果我正在构建此页面。我会避免在p标签中包装脚本。但我必须假设页面的作者不能改变它或有一个很好的理由把它放在那里。我不知道那个脚本做什么。它会写一些需要p标签的东西吗？再次，我会避免这种做法，并质疑它的存在是好的，但我也同意有一些情况下它必须在那里。
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.
我希望写这篇文章辩护是标记这个答案的人可能会考虑这个决定。我的答案是思想，目的性和相关性。作者认为这样。然而，在这个社会环境中，我尊重你不同意，有权降低我的答案。我只是希望你的选择是由于不同意我的回答，而不是作者选择我的你的。
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.
这篇关于CSS空白在页面的底部，尽管有min-height和height标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
