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

时间：2011-06-24 16:18:02

标签： css

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

http://womancareolympia.webs.com/

11 个答案:

答案 0 :(得分：64)

我觉得很有意思的是，在6个答案中，没有人提到问题的真正根源。

最后p #fw-footer内的{p> Collapsing margins是额外空间来源的地方。

明智的解决方法是将overflow: hidden添加到#fw-footer（或在上一个margin: 0添加p）。

您也可以将script移到p之外的p内，然后完全删除p;没有必要在script中包含p。第一个p（#fw-foottext）已应用margin: 0，因此该问题不会发生。

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

CSS3 gradient background with unwanted white space at bottom

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

目前，您已应用html { height: auto }，但无效：

（当窗口高于页面上的内容时会出现这种情况）

答案 1 :(得分：23)

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

将20px添加到body padding-bottom 

body {
    padding-bottom: 20px;
}

或向身体添加透明边框

body {
    border: 1px solid transparent;
}

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

为这个答案辩护

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

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

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

但为什么呢？ p标签的高度，填充和边距是否应该计算到身体的高度？

它是！如果你删除了我建议的填充底部样式，然后将主体的背景设置为黑色，你会发现身体的高度准确地包含了这个额外的p空间（你看到底部的条带转向黑色） ）。但是当找到从哪里开始时，渐变无法包含它。这是真正的问题。

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

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

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

我希望写下这个“辩护”的是那些记下这个答案的人可能会考虑这个决定。我的答案经过深思熟虑，有目的，有意义。作者这么认为。然而，在这种社会环境中，我尊重你不同意并且有权降低我的答案。我只是希望你的选择是出于与我的回答不一致的动机，而不是那个作者选择了我的回答。

答案 2 :(得分：15)

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

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

* {border：1px solid red; }

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

由于Chrome扩展程序错误，我在页面底部有空白区域，它将div“dp_swf_engine”添加到页面底部：

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

答案 3 :(得分：1)

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

编辑：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; }

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

答案 4 :(得分：1)

这将从页面元素中删除边距和填充，因为内部有一个带有脚本的段落会导致额外的边距。这样你就可以重置它，然后你可以设置页面的其他元素的样式，或者你可以给那个段落一个id，并为它设置边距为零。

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

尝试将此作为第一种风格。

答案 5 :(得分：1)

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

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

来自 this answer. 的引用。

答案 6 :(得分：0)

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

答案 7 :(得分：0)

它正在发生由于：

<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>

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

答案 8 :(得分：0)

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

始终适合我 class或ID可以用于div或甚至是导致空格的主体。

答案 9 :(得分：0)

我在将 html 解析为 string 时遇到了同样的问题。删除最后一个 <p></p>（并在需要时用替代品替换它，例如
）为我解决了这个问题。

答案 10 :(得分：-1)

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

相关问题
最新问题