CSS - 如何在不更改任何其他内容的情况下删除第二个垂直滚动条

Question

我正在尝试摆脱出现在我正在整理的此页面上的明显不需要的第二个垂直滚动条，请参阅 http://abchealth.info/doc-mike-special/test3/。

我

在这里的研究使我尝试从我的 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;/
}

Answer 1

更改以下内容：#mastercontainer {overflow:auto;} 更改为#mastercontainer {overflow: visible;}

正在发生的事情是，如果内容对于框架来说太大，"auto"会使用滚动条。也就是div 或 w/e 需要放大以避免滚动。可见会让它像我想的那样溢出。无论是可见的还是隐藏的都可以使用此代码 - css就是关于玩耍和实验的。

大多数浏览器都提供一个名为"FireBug"的插件 ->下载它。它允许您在查看时编辑网页的css等。对于 css 样式错误非常有用。强烈推荐用于此类问题。

Answer 2

这有效

#mastercontainer { overflow: hidden; }

或者上述解决方案也有效。

Answer 3

从div#mastercontainer中删除overflow:auto。

Answer 4

在许多情况下，将溢出 y 设置为"隐藏"可以删除垂直滚动条。可以将其设置为"可见"，因为这意味着溢出是可见的，这意味着无需滚动，因此滚动条不可见。

然而，这些设置并不总是有效，因为 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow 所说的：

为了使溢出生效，块级容器必须设置高度（高度或最大高度）或空白设置为 nowrap。

上面的链接是一个很好的资源，可以尝试了解"溢出"的一般工作原理，它并不像您希望的那么简单。

例如，另一个注释，从那里：

将

一个轴设置为可见（默认值），同时将另一个轴设置为其他值会导致可见表现为自动。

Answer 5

如果问题是由于 html， body { overflow-x： hidden;} 然后尝试使用 html， body{height： 100%;} 它对我来说效果很好。

Answer 6

对于任何使用离子图标和引导程序的人来说，问题可能出在离子/结构.css上。我在网站和离子/结构中使用离子图标.css我发现这两个属性导致了问题，更改它们解决了问题。

{
  overflow: hidden;
  overscroll-behavior-y: none;
}

更改为：

{
  overflow: scroll;
  overscroll-behavior-y: scroll;
}