具有 100% 高度的 XHTML HTML 元素导致滚动条答案

【问题标题】：XHTML HTML element with 100% height causing scrollbars具有 100% 高度的 XHTML HTML 元素导致滚动条
【发布时间】：2011-04-03 04:48:43
【问题描述】：

在我的 CSS 文件中，我使用了这个：

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

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

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

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

我怎样才能让它消失，但当内容高于显示高度时还保持滚动？

谢谢。

【问题讨论】：

【解决方案1】：

我需要在 XHTML 文档中使用 100% 的高度，这样我才能拥有 100% 的 div 元素。

不管怎样，我找到了答案：

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

所以要么使用 padding-top 来分隔最顶部的元素，要么在标签和下一个有上边距的元素之间使用没有上边距的 a。

【讨论】：

【解决方案2】：

overflow:hidden 应该有助于防止滚动条的显示（由于舍入错误，您可能会丢失约 1px 的内容

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

所以，使用这个 CSS 规则：

html,body { height: 100%; }

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

html { height: 100%; }

我没有滚动条。

和平...

【讨论】：

【解决方案5】：

垂直滚动条的出现是因为height:100%。你不需要它，除非你有理由使用它。

【讨论】：

【解决方案6】：

为什么要设置 100% 的身体高度？

默认会达到这个高度。

仅当您想以 px 为单位设置数字高度（例如 600px）时，才在 body 中设置高度是有意义的

【讨论】：

标签是我页面中的罪魁祸首。