XHTML HTML element with 100% height causing scrollbars

Question

In my CSS file I use this:

html,body{height:100%;padding:0;margin:0;border:0;}

Which causes a vertical scrollbar to appear on IE8, Chrome 5

Answer 1

I need 100% height in a XHTML document so that I can have div elements with 100%.

Anyway, I found the answer:

This problem only occurs when the top most element has a top margin. It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.

So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.

Answer 2

The vertical scrollbar is coming because of height:100%. You don't need that unless there is a reason for you to use that.

Answer 3

I ran into this issue today and found the scroll bar wasn't caused by a top margin on the first element, but by having BOTH the html and body elements have a height of 100%.

So, using this CSS rule:

html,body { height: 100%; }

I get scroll bars. If I change that to this CSS rule:

html { height: 100%; }

I get no scroll bars.

Peace...

Answer 4

overflow:hidden should help and prevent the display of scroll bars (you'll likely lose ~1px of content due to rounding errors

Answer 5

Why are you setting 100% height in body?

It will get this height by default.

It makes sense to set height in body only if you want to set a numeric height in px such as lets say 600px

Answer 6

There may be better ways but I simply default to 98% which seems to obviate scrollbars in all browsers.

you could also set the height using JavaScript but that feels a little hacky