XHTML HTML element with 100% height causing scrollbars

html xhtml height vertical-scroll
Francisc picture Francisc · Aug 24, 2010 · Viewed 13.8k times · Source

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.

Answer

Francisc picture Francisc · Aug 25, 2010

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.

Related questions

Redirect from an HTML page

Is it possible to set up a basic HTML page to redirect to another page on load?

Read More
RegEx match open tags except XHTML self-contained tags

I need to match all of these opening tags: <p> <a href="foo"> But not these: <br /> <hr class="foo" /> I came up with this and wanted to make sure I've got …

Read More
Make a div into a link

I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link. I'm looking for something like <a href="…"><div> … </div&…

Read More