Login/Register
XHTML HTML element with 100% height causing scrollbars
Asked Answered
Solved htmlxhtmlheightvertical-scroll
S

6

14

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 and Mozilla 3.6, all latest version.

Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.

Setting overflow:hidden; on the html element will completly stop scrolling on the page.

How can I make it go away please but also keep scrolling when content is higher than display height?

Thank you.

Seeger answered 24/8, 2010 at 13:57 Comment(1)
It's because of rounding errors calculating the viewport in all browser. Use height:98% or overflow:hidden. – Exscind
S
17

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.

Seeger answered 25/8, 2010 at 9:18 Comment(2)
I'll add that this doesn't necessarily mean the first element in the page; a deeply nested <h1> tag was the culprit in a page of mine. – Tympanum
The user agent stylesheet in some browsers adds a margin to the body, which usually follows the <html> tag, so this'll happen automatically. Use a reset CSS then. – Lionellionello
L
4

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

Leavetaking answered 24/8, 2010 at 14:1 Comment(0)
D
0

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

Dada answered 24/8, 2010 at 14:1 Comment(0)
E
0

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

Eleusis answered 4/3, 2013 at 23:46 Comment(1)
you need it to set it on body too in order to work with nested elements – Sobel
T
-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.

Torruella answered 24/8, 2010 at 14:0 Comment(0)
R
-6

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

Rayner answered 24/8, 2010 at 14:6 Comment(2)
Not always - sometimes you need an element to fill the viewable client area eg how would you add a block element which stretches the entire height of the visible area? – Dada
As Basiclife says, this isn't so. See jsfiddle.net/teDG3/1 for a simple demonstration. – Bethesde

© 2022 - 2024 — McMap. All rights reserved.