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的Aka以避免滚动。可见会让它像我想的那样溢出。无论是可见的还是隐藏的都可以使用这个代码 - css就是在玩耍和试验。

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

Answer 2

从overflow:auto删除div#mastercontainer。

Answer 3

这有效

#mastercontainer { overflow: hidden; }

或上述解决方案也有效。

Answer 4

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

Answer 5

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

但是，由于https://developer.mozilla.org/en-US/docs/Web/CSS/overflow所说的话，这些设置并不总是有效：

“为了使溢出生效，块级容器必须将设置的高度（height或max-height）或空白设置为nowrap。”

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

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

“将一个轴设置为可见（默认），而将另一个轴设置为其他值将导致可见行为为自动。”

Answer 6

对于使用 ion-icons和bootstrap 的任何人，问题都可能出在ionic / structure.css中。我在网站上使用离子图标，并且在 ionic / structure.css 中，我发现这两个属性引起了问题，并对其进行更改解决了该问题。

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

更改为：

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

CSS - 如何删除第二个垂直滚动条而不更改任何其他内容？

6 个答案: