CSS 强制垂直滚动条在 IE8 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1389979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force vertical scrollbar to display in IE8
提问by Alec Smart
The vertical bar does not appear in IE8 if the page is not long enough. In FF, there is a workaround for this
如果页面不够长，则在 IE8 中不会出现竖条。在 FF 中，有一个解决方法
html {
overflow: -moz-scrollbars-vertical;
}
I tried the following for IE8: overflow:scroll;but the scroll bar appears on both sides. I want it only for vertical and not horizontal. scroll-y does not work.
我为 IE8 尝试了以下方法：overflow:scroll;但滚动条出现在两侧。我只想要垂直而不是水平。滚动-y 不起作用。
Any solution?
有什么解决办法吗？
回答by Alec Smart
Oh figured it. Its
哦想通了。它的
body {
overflow-y: scroll;
}
回答by chip
I use the following:
我使用以下内容：
html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}
回答by Dave
Try
尝试
-ms-overflow-y : scroll;
-ms-overflow-y : scroll;
回答by Shubham
put it in your div i.e.
把它放在你的 div 中
style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;
for example :
例如 ：
<div class="left" style="overflow: -moz-scrollbars-vertical; overflow-y: scroll;
width: 230px; height: 500px;" >
回答by Waggers
Another solution is to set the body height to 100% - see a before/after example at http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm
另一种解决方案是将身体高度设置为 100% - 请参阅http://www.iecustomizer.com/msmvp/HTMLHeightTest.htm 上的之前/之后示例
回答by Sebastián
html, body { height: 100.1%; }
html, body { 高度: 100.1%; }
回答by Dianne
Best reply to date (may 2012) for forcing vertical scrollbar in safari, opera & firefox is:
迄今为止（2012 年 5 月）在 safari、opera 和 firefox 中强制垂直滚动条的最佳回复是：
html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}
html { min-height: 100%; padding-bottom: 1px; }
Opera was the most difficult and would only insert the vertical scrollbar no matter the height of the page if both html tags above were used.
Opera 是最难的，如果上面的两个 html 标签都被使用，那么无论页面的高度如何，都只会插入垂直滚动条。
Thanks - Dianne
谢谢 - 黛安娜
回答by Arnon Weinberg
Just noting that normalize.css recommended:
只是注意到 normalize.css 推荐：
html { overflow-y: scroll; }
which is slightly different from Alec's answer, but has since dropped it. Per HTML5 Boilerplate:
这与亚历克的回答略有不同，但后来放弃了。每个HTML5 样板：
The following style is no longer included by default due to problems that can arise in Firefox when combined with JS plugins (like modals or drag-and-drop UIs) that rely on viewport dimension calculations.
由于与依赖视口尺寸计算的 JS 插件（如模态或拖放 UI）结合使用时，Firefox 中可能会出现问题，因此默认情况下不再包含以下样式。
And indeed my experience is that it messes up some jQuery plugins.
事实上，我的经验是它搞砸了一些 jQuery 插件。
I'm not sure why the various min-height / margin-bottom / padding-bottom solutions aren't preferred, but they do create an active scrollbar (albeit with a 1px movement) whereas overflow-y creates a disabled scrollbar, which is nicer.
我不确定为什么各种 min-height / margin-bottom / padding-bottom 解决方案不是首选，但它们确实创建了一个活动滚动条（尽管移动了 1px），而 overflow-y 创建了一个禁用的滚动条，这是更好。
回答by Jonesy
html {height: 100%; margin-bottom: 1px;}
Makes your page always 1px longer so the scroll bars always appear and only adds 1px scroll to pages that are not long enough so it doesn't make the viewer think they are missing something and scroll down for no reason. Simple and works in all main stream browsers (that i tested)
使您的页面始终长 1px，因此滚动条始终出现，并且仅向不够长的页面添加 1px 滚动，因此不会让查看者认为他们缺少某些内容并无缘无故地向下滚动。简单且适用于所有主流浏览器（我测试过）
回答by JoshuaDavid
html {
height: 100%;
border-bottom: 1px #999 solid;
}
NOTE: I wanted to force the scrollbar on pages that I KNOW will not need to scroll. This solution is for such a situation.
注意：我想在我知道不需要滚动的页面上强制滚动条。此解决方案适用于这种情况。
Jonesy's solution didn't work for me in all browsers, but I'm willing to have an insignificant 1px gray stripe which works consistently in all browsers. To me it's better than showing a full 1% extra (chip's solution). Design wise, it's hardly even a concession because it's so insignificant - try it and see what I mean.
Jonesy 的解决方案不适用于我在所有浏览器中，但我愿意有一个微不足道的 1px 灰色条纹，它在所有浏览器中始终如一。对我来说，这比展示 1% 的额外费用要好（芯片的解决方案）。设计明智，它甚至不是一种让步，因为它是如此微不足道 - 尝试一下，看看我的意思。
Also, this solution is going to be super future-proof. If you want to add blank space like the other solutions, there's no telling what optimizations will get built into future browsers and I could imagine some browser detecting wasted blank space and eliminating it (stranger things have happened). By conceding 1px, you are forcing the browser to deal with this 1 pixel no matter what.
此外，这个解决方案将是超级面向未来的。如果您想像其他解决方案一样添加空白空间，则无法确定未来浏览器将内置哪些优化，我可以想象某些浏览器会检测到浪费的空白空间并消除它（奇怪的事情发生了）。通过让步 1px，您将迫使浏览器无论如何都要处理这 1 个像素。
