CODEWITHSUNDEEP
cssscrollscrollbarhide
BottleRockets
BottleRockets

Reputation: 51

Page Shows Scroll bar no matter what

Here's my page: http://bad-sf.com/stemtest/about.html

Notice that scrolling is still an option even though the content is small enough to not require scrolling. Could it have to do with my css? (below):

body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
* {
margin:0;
padding:0;
outline: none;
}
html, body {
height:100%;
font-family: '_.regular';
font-size: 13px;
outline: none;
}
#wrap {
min-height:100%;
width:800px;
margin: 2% auto;
}
#main {
overflow:auto;
padding-bottom: 30px;
}
#smm {
width: 400px;
height: 200px;
float:left;
}

#footer {
position: relative;
margin-top: 0px;
height: 35px;
clear:both;
font-family: '_.regular';
}

THANKS! I'm still learning html and css so any input you have would be really appreciated - Danny

Upvotes: 1

Views: 558

Answers (2)

mingos
mingos

Reputation: 24502

This is caused by #wrap, being 104% height. Note these rules:

body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    margin: 2% auto;
}

So your #wrap is actually 100% height plus 2% margin on top plus 2% margin on bottom.

There are several ways of countering this.

You can remove the height from body and optionally min-height from #wrap, as it's no use anymore in this case.

You can change margin on #wrap to margin: 0 auto; (this will inevitably raise the content though).

There are probably a few other possibilities, but seeing as the unsatisfactory answers are voted down, I don't really feel compelled towards thinking about more sublime solutions.

Upvotes: 2

mushroom
mushroom

Reputation: 1945

Take away height:100%; from html, body { }. Why did you need it there even anyway?

The reason why the scrollbar is always appearing is because the #wrap DIV is also set to 100% height and on top of that, a margin of 2%. This forces your body to be 2% more than 100%.

You can remove the 2% margin from #wrap but if you don't want do, removing the height: 100%; from html, body { } should do the trick.

Upvotes: 0

Related Questions