解决方法
添加20px到body padding-bottom
body { padding-bottom: 20px; }
或者向身体添加一个透明边框
body { border: 1px solid transparent; }
两人都为我工作,在firebug
为了保护这个答案
以下是关于我对这个问题的答案的正确性的一些意见。这些讨论正是为什么stackoverflow是如此伟大。许多不同的人对如何最好地解决问题有不同的意见。我学到了一些令人难以置信的编码风格,我不会想到自己。我已经被告知,读者不时地从我的风格中学到了东西。社会编码真的鼓励我成为一个更好的程序员。
社会编码有时会令人不安。当我花了30分钟,用jsfiddle刷新一个答案,并详细说明只提交并找到10个其他答案,所有这些都说相同的东西在较少的细节,我讨厌它。而作者则接受别人的回答。多么沮丧!我认为这已经发展到我的同行贡献者 – 特别是三十点。
Thirtydot的答案是完全合法的。脚本周围的p是这个问题的罪魁祸首。取下它,空间消失。这也是这个问题的一个很好的答案。
但为什么? p标记的高度,填充和边距不应该计算到身体的高度吗?
这是!如果您删除了我建议的填充底部样式,然后将身体的背景设置为黑色,您将看到身体的高度精确地包含了这个额外的p空间(您看到底部的条纹变成黑色)。但是,当找到从哪里开始时,梯度无法包含它。这是真正的问题。
我提供的两个解决方案是告诉浏览器正确计算梯度的方法。事实上,padding-bottom可以只是1px。该值不重要,但设置为。它使浏览器看到身体结束的位置。设置边框将具有相同的效果。
在我看来,一个20px的填充设置看起来是最好的这个页面,这就是为什么我这样回答。它正在解决渐变开始的问题。
现在,如果我正在构建这个页面。我会避免将脚本包装在p标签中。但我必须假设页面的作者不能改变它或有一个很好的理由把它放在那里。我不知道该脚本是什么。它会写一些需要p标签的东西吗?再次,我会避免这种做法,质疑它的存在是件好事,但我也接受有些情况必须在那里。
我希望写这个“防御”的是,标记这个答案的人可能会考虑这个决定。我的答案是思想,有目的和相关的。笔者这么想。然而,在这个社会环境中,我尊重你不同意,并有权降低我的答案。我只希望你的选择是由于我的答案不同意的动机,而不是作者选择了我的对你的。