具有100％高度的XHTML HTML元素导致滚动条

Question

在我的CSS文件中，我使用它：

html,body{height:100%;padding:0;margin:0;border:0;}

这导致垂直滚动条出现在IE8，Chrome 5和Mozilla 3.6上，所有最新版本。

此外，该文档为空，它只有html，head和body标签，因此屏幕上没有任何内容可以导致该文件。

设置溢出：隐藏;在html元素上将完全停止在页面上滚动。

如果内容高于显示高度，我怎么能让它消失，还要继续滚动？

谢谢。

Answer 1

我在XHTML文档中需要100％的高度，以便我可以使用100％的div元素。

无论如何，我找到了答案：

仅当最顶层元素具有上边距时才会出现此问题。 似乎顶部边距被添加到100％高度，使其更高并导致滚动条。

因此，要么使用padding-top来区分最顶层的元素，要么使用带有顶部边距的标签和下一个元素之间没有上边距的情况。

Answer 2

溢出：隐藏应该有助于防止显示滚动条（由于舍入错误，你可能会丢失~1px的内容

Answer 3

可能有更好的方法，但我只是默认为98％，这似乎可以避免所有浏览器中的滚动条。

你也可以使用JavaScript设置高度，但感觉有点hacky

Answer 4

今天我遇到了这个问题，发现滚动条不是由第一个元素的上边距引起的，但是通过同时使用html和body元素的高度为100％。

所以，使用这个CSS规则：

html,body { height: 100%; }

我得到滚动条。如果我将其更改为此CSS规则：

html { height: 100%; }

我没有滚动条。

...和平

Answer 5

由于height:100%，垂直滚动条即将推出。除非有理由使用它，否则您不需要它。

Answer 6

为什么要在体内设置100％的高度？

默认情况下会达到此高度。

仅当您想要在px中设置数字高度时才设置身高，例如600px