html - HTML5 Doctype removed height100% rendering -
this question appeared address problem solution has no effect me.
below simple html example. if remove doctype declaration, page 100% height fit. added, height ignored , html renders entirely @ top of page only.
can advise why? using html5 doctype there other things going on in site html5 , don't believe using strictly html4 or deprecated.
<!doctype html> <html dir="ltr" lang="en"> <head> <title>layout test</title> <style media="screen" type="text/css"> .yellow {background-color: yellow;} .orange {background-color: orange;} .red {background-color: red;} .green {background-color: green;} .fixed-width100 {width:100px;} .fixed-height75 {height: 75px;} .height50percent {height: 50%;} .height100percent {height:100%;} .width100percent {width: 100%;} .table {display: table;} .row {display: table-row;} .cell {display: table-cell;} </style> </head> <body class="height100percent"> <!--wraps entire page single table fits page--> <div class="width100percent height100percent table"> <div class="row fixed-height75 green"> top header </div> <div class="row"> <div class="cell fixed-width100">middle</div> </div> <div class="row fixed-height75 green">bottom footer</div> </div> </body> </html>
you need add this:
html {height: 100%} body {height: 100%}
100% 100% of inherited height.
Comments
Post a Comment