CSS/HTML - why does height:100% cause vert. scroll bars?

vsboxerboy

2[H]4U
Joined
Oct 17, 2005
Messages
3,661
I've taken my page down to the simplest possible form, and I'm still getting a problem where the vertical scroll bars appear. It seems that 100% for height is really using a bit more than that. Is there something that I'm doing wrong?

Looking at my Chrome tools, I can see that body is 1183px x 1515px and body is 1167px x 1515px

HTML:


Code:
<html>
    <head>
        <link href="http://www.mydomain.com/style.css" rel="stylesheet">
    </head>
    <body></body>
</html>



CSS:


This works fine
Code:
html{height:99%;}
body{height: 99%;}
Code:
html, body {height:99%;}

All of these cause vertical scroll bars to appear (height goes past edge)
Code:
html{height:100%;}
body{height: 99%;}
Code:
html{height:99%;}
body{height: 100%;}
Code:
html{height:100%;}
body{height: 100%;}
Code:
html, body {height:100%;}
 
Are you sure there is no padding or margin defined anywhere? I'm pretty sure body has margins defined by default in a lot of browsers, including Chrome.

height: 100% will often not do what you want either, unless you use absolute positioning.

Also, make sure you define a DOCTYPE, otherwise you will see weird issues to happen in Internet Explorer.
 
That's what I'm thinking but I've noticed the same thing in both chrome and FF. Usually I use a DOCTYPE, but for simplicity sake, it was omitted here.
 
Always include a DOCTYPE .. you don't even know the crazy stuff i've encountered because of the omission of the one line of code.

For 100% height use absolute positioning as mentioned before.

<body><div style="position:absolute; top:0px; left:0px; height: 100%; width:100%;"></body>

This will work cross-browser. I'm using this myself.
 
You need 'overflow:hidden'

Sounds like you're trying to do something fancy otherwise you wouldn't need height 100% on <body>. For height and width to work consistently well, you should start off with set values in pixels or em, and then start using percentages.

So for example body:style:width:1000px, height:800px

But if you want to do fancy stuff like fullscreen background images and such, then by all means use all percentages
 
the body element, as stated earlier in the thread, has paddings and margins which you need to reset. Don't use overflow:hidden, unless you're sure you don't ever want the user to be able to scroll the page.

Code:
html, body { margin:0; padding:0; width:100%; height:100% }
 
Don't use overflow:hidden, unless you're sure you don't ever want the user to be able to scroll the page.

Yeah, I don't want to hide the overflow - I just wanted to get rid of the padding / margins that are applied before whatever is specified by me.
 
In this example, both body and #container are 100% height. margin: 0; gets rid of the 8px default margin on the body.

Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height: 100%;
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	height: 100%;
	width: 800px;
	margin: 0 auto;
	background: #999;
}
</style>
</head>
<body>
        <div id="container">
        <!--end container--></div>
</body>
</html>
 
Back
Top