html - Height more than 100% of browser height -


i'm building responsive webiste. don't want set default height in px, want to this. top of layout. e.g. prowly.com.

enter image description here

and 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 100% height of browser</div>         <div id="content2">i want 10% of height browser</div>     </div> </body> 

ps. saw, 100% of height it's buggy on safari iphone , opera mobile don't know should do. of course can use js want know there other way?

you need set body

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

demo: http://jsfiddle.net/qvxw8/5/

or this:

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

and have correct values use

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

or change code

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

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


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -