div height:100%; not working with display:table-cell;

css, html

Solution

Your code should work now.

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

Example

Rule of thumb : Always have a proper markup whenever `display : table-cell` is concerned.

Problem

My code was working when ``` <!DOCTYPE html> <html> <body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;"> <div style="height:100%; width:100%; border:solid;"></div> </body> </html> ``` But not working when i added display:table-cell; to div for using vertical-align ``` <!DOCTYPE html> <html> <body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;"> <div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div> </body> </html> ``` I want the div to cover the whole white space in body

Original source

Related problems