CSS - 如何在不更改任何其他内容的情况下删除第二个垂直滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11970984/
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
CSS - How to remove 2nd vertical scroll bar without changing anything else?
提问by Michael Solomon
I am trying to get rid of a distinctly unwanted second vertical scrollbar that has appeared on this page I am putting together, see http://abchealth.info/doc-mike-special/test3/.
我试图摆脱出现在我正在整理的页面上的明显不需要的第二个垂直滚动条，请参阅http://abchealth.info/doc-mike-special/test3/。
My research here led me to try and remove the 'overflow' from my CSS, but this absolutely trashed my layout, so I am looking for a solution that removes the inner vertical scrollbar without changing anything else...
我在这里的研究使我尝试从我的 CSS 中删除“溢出”，但这绝对破坏了我的布局，所以我正在寻找一种解决方案，在不更改任何其他内容的情况下删除内部垂直滚动条......
I'd much appreciate your help, thanks!
非常感谢您的帮助，谢谢！
Here's my CSS:
这是我的 CSS：
/* Generated by KompoZer */
body {
background-image: url(http://abchealth.info/images/bg.png);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
div#wrap {min-height: 100%;}
div#mastercontainer {
overflow:auto; width: 100%;
height: 100%;
min-height: 100%;
}
div#header {
background-image: url(http://abchealth.info/images/header-bg.jpg); background-repeat:
repeat-x;
position: top; height: 96px;}
div#content {
}
div#innercontentmiddle {
margin: 0 auto;
width: 540px;
padding:10px; padding-bottom:510px;}
div#footerclear {
}
div#footer {
position:relative; margin-top: -510px; height: 510px; clear:both;
background-image: url(http://abchealth.info/images/footer-bg.jpg); background-repeat:
repeat-x;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
回答by jos
change this: #mastercontainer {overflow:auto;} to #mastercontainer {overflow: visible;}
改变这个：#mastercontainer {overflow:auto;} 到 #mastercontainer {overflow: visible;}
What's happening is 'auto' uses a scroll bar if the content is too big for the frame. Aka that div or w/e needs enlarged to avoid the scroll. Visible will let it overflow like I think you want. Either visible or even hidden would work with this code-- css is all about playing around and experimenting.
如果内容对于框架来说太大，'auto' 会使用滚动条。也就是 div 或 w/e 需要放大以避免滚动。Visible 会让它像我想的那样溢出。可见或什至隐藏都可以使用此代码 - css 就是玩弄和试验。
***Most browsers offer a plug-in called 'FireBug' -> download it. It allows you to edit the css etc of webpages while viewing. Very useful for css styling errors. Highly recommended for issues such as this.
***大多数浏览器都提供名为“FireBug”的插件 -> 下载。它允许您在查看时编辑网页的 css 等。对于 css 样式错误非常有用。强烈推荐用于此类问题。
回答by PJH
This works
这有效
#mastercontainer { overflow: hidden; }
#mastercontainer { overflow: hidden; }
or the above solution works too.
或者上述解决方案也有效。
回答by Curt
Remove overflow:autofrom div#mastercontainer.
删除overflow:auto从div#mastercontainer。
回答by Ali Sajid
If the problem is due to html, body { overflow-x: hidden;} then try using html, body{height: 100%;} it worked fine for me.
如果问题是由于 html, body { overflow-x: hidden;} 然后尝试使用 html, body{height: 100%;} 对我来说效果很好。
回答by Panu Logic
Setting overflow-y to'hidden' can in many cases remove the vertical scrollbar. As can setting it to 'visible' because that means that overflow is visible which means no need to scroll, so scrollbars are not visible.
将 overflow-y 设置为 'hidden' 可以在许多情况下删除垂直滚动条。可以将其设置为“可见”，因为这意味着溢出是可见的，这意味着不需要滚动，因此滚动条不可见。
Those setting however don't always work, because of what is said at https://developer.mozilla.org/en-US/docs/Web/CSS/overflow:
然而，这些设置并不总是有效，因为https://developer.mozilla.org/en-US/docs/Web/CSS/overflow上所说的 ：
"In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap."
“为了使溢出产生效果，块级容器必须设置高度（高度或最大高度）或将空白设置为 nowrap。”
The above link is a good resource for trying to understand how 'overflow' works in general, it's not as simple as you could hope.
上面的链接是一个很好的资源，用于尝试了解“溢出”的一般工作原理，它并不像您希望的那么简单。
For instance, another note, from there:
例如，另一个注释，来自那里：
"Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
“将一个轴设置为可见（默认），同时将另一个轴设置为不同的值会导致可见的行为为自动。”
