How to get rid of the vertical scroll bar?

Hello,

Alright - I have the same problem with both of these sites. I want to get ride of the vertical scroll bar when it is not needed but at the same time keep my 100% height.

http://www.discountsitedesign.com/clients/dean.html - this page I need to get ride of 2px (because of the border on the wrapper).

http://www.littleaboutalot.com/ this page I need to get rid of 15px (because of the 15px top margin on the wrapper). Thanks!

 

You're misunderstanding the meaning of 100%. 100% (except OF COURSE in IE) means 100%. What's 100% of a candy bar? All of it. What's 100% height? ALL the space between the top and bottom.

On site one, you then went ahead and added a border. Borders are counted when considering the width and height of an element. So with a 100% high wrapper PLUS 2px, what do you have? You have something mathematically impossible (except of course in our very very extra special friend IE)-- more than everything. More than 100%. This is also true with your second page, even though margins are not normally considered when calculating heights and widths. The browsers have the same problem. How do you fit more of you inside your own skin? IE just expands the skin, which is wrong (though useful, huh?). Someone tells you to eat 100% of the candybar and you do. Then they tell you o eat more of it. You can't.

I've been doing 100% high pages lately because they're nice. Here's the way you do it:
html, body { height: 100%;}
#wrapper {
height: 100%; (this is for IE6 and because of cascade, we don't need to hide it)
min-height: 100%; (overrides "height" in the smarter browsers)
}

Now you put all your things inside #wrapper and other than widths, colours, and a few other things, you DON'T TOUCH #wrapper.

If you need a border, then you'll need height: 98% or something on #wrapper instead. You'd do this the same way as before:
#wrapper {
height: 98%;
min-height: 98%;
border: 1px solid #f00;
}

If you want SPACE, then make the body do it.
html, body {height: 100%;}
body {
padding: 15px 0;
}
#wrapper {
height: 100%; (of the available space in the body)
min-height: 100%;
etc...
}
Or you could even be safer with 99% or something.

I've used side padding on the body so something could be centered and flex-width but always (even at the smallest screensize) have some space on each side. Without body padding, then with flex-width pages the flexi part will always fill 100% width until you get wider than the widest setting, because your margins were auto.