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

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -