Height more than 100% of browser height

Question

I'm building responsive webiste. I don't want to set a default height in px, but I want to to something like this. This will be only top of layout. E.g. prowly.com.

enter image description here

And my fiddle:

http://jsfiddle.net/QVxW8/1/

        html, body {
            margin: 0;
            padding:0;
        }
        div#handler {
            width: 100%;
            height: 110%;
            display:block;
        }
        div#content {
            width: 100%;
            height:100%;
            background: red;
        }
        div#content2 {
            width: 100%;
            height: 10%;
            background: blue;
        }

HTML

<body>
    <div id="handler">
        <div id="content">I want to 100% height of browser</div>
        <div id="content2">I want 10% of height browser</div>
    </div>
</body>

Ps. As I also saw, 100% of height it's buggy on Safari iPhone and Opera Mobile so I don't know what should I do. Of course I can use JS but I want to know is there other way?

Also, it's been asked before http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height — Sergiu Paraschiv, Aug 26 '13 at 16:59

Mike · Answer 1 · 2013-08-26T17:23:08.133

2

Try adding 100% height in the html, body like so :

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

JSFIDDLE

EDIT : You may want to read this article.

edited Aug 26 '13 at 17:23

answered Aug 26 '13 at 16:58

Mike

1,760
5
21
40

Gildas.Tambo · Accepted Answer · 2013-08-26T17:31:39.807

you need to set body like this

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                bottom:0;
                top:0;
                right:0;
                left:0;
            }

Demo: http://jsfiddle.net/QVxW8/5/

or like this:

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                left:0;
                top:0;
                width:100%;
                height:100%;
            }

and to have the correct values use

*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

or just change you code to

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

demo: http://jsfiddle.net/QVxW8/6/

score 0 · Answer 3 · answered Aug 26 '13 at 16:58

try this

*{padding: 0; marign:0;}
      html, body {
            margin: 0;
            padding:0;
        }
        div#handler {
            width: 100%;
            height: 110%;
            display:block;
        }
        div#content {
            width: 100%;
            height:100%;
            background: red;
        }
        div#content2 {
            width: 100%;
            height: 10%;
            background: blue;
        }

score 0 · Answer 4 · answered Dec 17 '20 at 18:48

   html, body {
        margin: 0;
        padding:0;
    }
    div#handler {
        width: 100%;
        height: 100vh;
        display:block;
    }
    div#content {
        width: 100%;
        height:90%;
        background: red;
    }
    div#content2 {
        width: 100%;
        height: 10%;
        background: blue;
    }

the trick here is use VH for device height or VW for device width instead of % or px

Height more than 100% of browser height

4 Answers4