Full-screen Div Is Shifted Down When Contains H1 Element Only

I have trouble to create a page with full screen div with h1 element. Following page is rendered correctly by IE and Chrome as expected: Contains Red full-screen div, no scroll-bar

Solution 1:

Following page is rendered correctly by IE and Chrome as expected: Contains Red full-screen div

If that’s what you get, then that can only be in Quirks Mode, I suppose – because you forgot to set height:100% for html as well, and without that the percentage height for body is not supposed to work that way.

And with a correct Doctype set (and height for html), you get the same result in all standards conform browser – the one you think is wrong: http://jsfiddle.net/q6g8Q/1/

It’s actually correct though, because of adjoining margins – the default margin-top from the browser stylesheet for the h1 adjoins the margin-top of the div – and therefor it gets pushed down accordingly.

So set the margin-top of the h1 to zero, and the “problem” is gone – http://jsfiddle.net/q6g8Q/2/

Solution 2:

You have to reset the css of your browser. Just add this to the top of your css :

* {
    margin: 0;
    padding: 0;
}

// #main h1 { margin:0; } // this snippet will be enough for your case, but with the other you remove every margin and padding made by the browser.

demo JsFiddle

If you want more info about this tricks, read this article by Chris Coyier.

If you want a full css reset, you should consider the Reset Reloaded.

Solution 3:

change the line-height or margin padding. That should do the trick. play around with some big numbers ;)