full-screen div is shifted down when contains h1 element only

Question

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-bars:

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>title</title>
    <style>
        html {
            background-color: purple;
        }
        body {
            background-color: blue;
            height: 100%;
            margin: 0;
        }
        #main {
            background-color: red;
            min-height: 100%;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1>
            some text
        </h1>
    </div>
</body>
</html>

But, for the Firefox (27.0.1) I found:

show purple line at the top of the page
and vertical scroll-bar
if I add some text directly to #main div before h1 element, then page renders as expected.

What I should do to render it correctly in FireFox with text in h1 only ?

score 2 · Answer 1 · answered Mar 06 '14 at 20:08

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/

aloisdg · Answer 2 · 2014-03-06T20:07:53.860

1

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.

edited Mar 06 '14 at 20:07

answered Mar 06 '14 at 19:48

aloisdg

22,270
6
85
105

@jozef You should read the [answer](http://stackoverflow.com/questions/22234348/full-screen-div-is-shifted-down-when-contains-h1-element-only/22234462?noredirect=1#comment33764309_22234462) of CBroe . I did not take the time to answer about the second part of the question; he did. By the way, he give more information than I. – aloisdg Mar 06 '14 at 20:17

score 0 · Answer 3 · answered Mar 06 '14 at 19:46

0

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

answered Mar 06 '14 at 19:46

Nicky Smits

2,980
4
20
27

full-screen div is shifted down when contains h1 element only

3 Answers3

Linked