高度为100%的XHTML元素导致滚动条

在我的CSS文件中，我使用以下内容：

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

这会导致IE8、Chrome 5和Mozilla 3.6（均为最新版本）上出现一个垂直滚动条

而且，文档是空的，它只有html、head和body标记，所以没有任何东西会出现在屏幕之外

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

当内容高于显示高度时，我如何使其消失，同时保持滚动

---

谢谢。

垂直滚动条的出现是因为

高度：100%

。除非您有理由使用它，否则您不需要它。

可能有更好的方法，但我只是将默认值设置为98%，这似乎避免了所有浏览器中的滚动条

---

您也可以使用JavaScript设置高度，但这感觉有点粗糙。

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

为什么要在正文中设置100%的高度

默认情况下，它将获得此高度

---

只有当您想在px中设置数字高度（比如600px）时，在body中设置高度才有意义。我需要在XHTML文档中设置100%的高度，这样我就可以使用100%的div元素

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

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

---

因此，要么使用padding top来分隔最顶部的元素，要么在标记和下一个具有上边距的元素之间使用没有上边距的空格。

我今天遇到了这个问题，发现滚动条不是由第一个元素上的上边距引起的，而是由于html和body元素的高度都为100%

因此，使用这个CSS规则：

html，正文{高度：100%；}

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

html{height:100%；}

我没有滚动条

---

Peace…

这是因为在所有浏览器中计算视口时存在舍入错误。使用高度：98%或溢出：隐藏。不总是-有时您需要一个元素来填充可视客户区域，例如如何添加一个块元素来拉伸可视区域的整个高度？正如Basiclife所说，情况并非如此。有关简单的演示，请参阅我要补充的是，这并不一定意味着页面中的第一个元素；在我的页面中，一个深度嵌套的标记是罪魁祸首。某些浏览器中的用户代理样式表在

正文

中添加了一个边距，它通常在

标记之后，因此这将自动发生。然后使用重置CSS。您需要它将其设置在正文t上oo以使用嵌套元素