CSS - How to remove 2nd vertical scroll bar without changing anything else?

user_1196571 0
Viewed 44840

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/.

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...

I'd much appreciate your help, thanks!

Here's my 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;/
}
overflow scrollbar css
6 Answers

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.

Those setting however don't always work, because of what is said at 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.

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.

user_16399180

For anyone using ion-icons and bootstrap, the issue can be in ionic/structure.css. I was using ion-icons on the website and in ionic/structure.css I found these two properties causing the issue and changing them solved the issue.

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

Changed to:

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