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.
and fiddle:
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%; }
Comments
Post a Comment