XHTML HTML 元素的 100% 高度导致滚动条
在我的 CSS 文件中，我使用这个：
html,body{height:100%;padding:0;margin:0;border:0;}
这会导致垂直滚动条出现在 IE8、Chrome 5 和 Mozilla 3.6（所有最新版本）上。
此外，该文档是空的，它只有 html、head 和 body 标签，因此屏幕上不会出现任何内容导致出现这种情况。
设置溢出：隐藏； html 元素上的 将会完全停止在页面上滚动。
当内容高于显示高度时，如何让它消失但又继续滚动？
谢谢。
In my CSS file I use this:
html,body{height:100%;padding:0;margin:0;border:0;}
Which causes a vertical scrollbar to appear on IE8, Chrome 5 and Mozilla 3.6, all latest version.
Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.
Setting overflow:hidden; on the html element will completly stop scrolling on the page.
How can I make it go away please but also keep scrolling when content is higher than display height?
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我需要 XHTML 文档中的 100% 高度，以便可以拥有 100% 的 div 元素。
不管怎样，我找到了答案：
只有当最上面的元素有上边距时才会出现这个问题。
看起来顶部边距被添加到 100% 高度，使其更高并导致滚动条。
因此，要么使用 padding-top 来分隔最顶部的元素，要么在标签和下一个有上边距的元素之间使用没有上边距的元素。
I need 100% height in a XHTML document so that I can have div elements with 100%.
Anyway, I found the answer:
This problem only occurs when the top most element has a top margin.
It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.
So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.
溢出：隐藏应该有助于并防止滚动条的显示（由于舍入错误，您可能会丢失〜1px的内容
overflow:hidden should help and prevent the display of scroll bars (you'll likely lose ~1px of content due to rounding errors
可能有更好的方法，但我只是默认为 98%，这似乎可以避免所有浏览器中的滚动条。
你也可以使用 JavaScript 设置高度，但这感觉有点hacky
There may be better ways but I simply default to 98% which seems to obviate scrollbars in all browsers.
you could also set the height using JavaScript but that feels a little hacky
我今天遇到这个问题，发现滚动条不是由第一个元素的上边距引起的，而是由 html 和 body 元素的高度均为 100% 引起的。
因此，使用以下 CSS 规则：
html,body { height: 100%; }我得到滚动条。如果我将其更改为以下 CSS 规则：
html { height: 100%; 。我没有看到滚动条
和平...
I ran into this issue today and found the scroll bar wasn't caused by a top margin on the first element, but by having BOTH the html and body elements have a height of 100%.
So, using this CSS rule:
html,body { height: 100%; }I get scroll bars. If I change that to this CSS rule:
html { height: 100%; }I get no scroll bars.
Peace...
垂直滚动条的出现是因为
height:100%。除非有理由使用它，否则您不需要它。The vertical scrollbar is coming because of
height:100%. You don't need that unless there is a reason for you to use that.为什么要设置 100% 身体高度？
默认情况下它将获得此高度。
仅当您想设置以 px 为单位的数字高度（例如 600px）时，才有意义在 body 中设置高度
Why are you setting 100% height in body?
It will get this height by default.
It makes sense to set height in body only if you want to set a numeric height in px such as lets say 600px