尽管有最小高度和高度标记,但页面底部的CSS空白区域

Question

我无法让本页底部的空白区域消失.我身上有最小高度和高度标签.有什么建议？谢谢!

Answer 1

我发现很明显,在6个答案中,没有人提到问题的真正根源.

在最后一个p内部折叠边距#fw-footer是额外空间源自的地方.

一个明智的解决将是添加overflow: hidden到#fw-footer(或简单地添加margin: 0在最后p).

你也可以只移动了script,去年内p外侧p,然后取出p完全; 没有必要包装script一个p.第一个p(#fw-foottext)已margin: 0应用,因此该问题不会发生.

顺便说一句,你已经打破了我在这个问题上给你的修复:

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

目前,您已html { height: auto }被应用,但不起作用:

(这种情况发生在一个比页面上的内容更高的窗口)

Answer 2

问题是如何计算100%的高度.有两种方法可以解决这个问题.

将20px添加到身体填充底部

body {
    padding-bottom: 20px;
}

或者为身体添加透明边框

body {
    border: 1px solid transparent;
}

两个都在firebug为我工作

以下是关于我对这个问题的答案的正确性的一些评论.这些讨论正是stackoverflow如此强大的原因.许多不同的人对如何最好地解决问题有不同的看法.我学会了一些令人难以置信的编码风格,我不会想到自己.而且我被告知读者不时从我的风格中学到一些东西.社交编码确实鼓励我成为更好的程序员.

社交编码有时会令人不安.我讨厌它,当我花了30分钟用一个jsfiddle和详细的解释来解决答案时,只提交并找到其他10个答案,所有这些都在不太详细地说同样的事情.作者接受了别人的回答.多么令人沮丧!我认为这已经发生在我的伙伴们身上 - 特别是thirtydot.

Thirtydot的答案是完全合法的.在p周围的script是这个问题的罪魁祸首.取下它,空间消失.这个问题也是一个很好的答案.

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

它是!如果你删除我建议的填充底部样式,然后将主体的背景设置为黑色,您将看到主体的高度p准确地包含这个额外的空间(您看到底部的条带变为黑色).但是当找到从哪里开始时,渐变无法包含它.这是真正的问题.

我提供的两个解决方案是告诉浏览器正确计算渐变的方法.事实上,填充底部可能只是1px.值并不重要,但设置为.它使浏览器看看身体结束的位置.设置边框将产生相同的效果.

在我看来,20px的填充设置看起来最适合这个页面,这就是我这样回答的原因.它正在解决梯度开始的问题.

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

我写这篇"辩护"的希望是,记下这个答案的人可能会考虑这个决定.我的答案经过深思熟虑,有目的,有意义.作者这么认为.然而,在这种社会环境中,我尊重你不同意并且有权降低我的答案.我只是希望你的选择是出于对我的回答的不同意见,而不是那个作者选择了我的.

Answer 3

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

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

*{border:1px solid red; }

这个css行在你的所有css元素周围放置一个红色框.

我的页面底部有空白区域,因为Chrome扩展错误,将div"dp_swf_engine"添加到页面底部:

如果没有红色框,我就不会注意到1px div.然后我摆脱了错误的扩展,并在#dp_swf_engine上放置'display:none'作为辅助措施.(谁知道什么时候可以回来为我的所有页面和应用添加页面底部的随机空格？!)