Child divs not taking parent height
- by Hiral
I want height of children div .cell to take up 100% height of parent. But it is not happening.
HTML:
<div class="header">
header
</div>
<div class="wrapper">
<div class="padding">
<div class="table bg">
<div class="cell">
hello world
</div>
<div class="cell">
dummy text
</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
CSS:
html,body{height:100%;}
body{margin:0;padding:0;}
.footer,.header{background:black;height:30px;color:white;}
.wrapper{min-height:calc(100% - 60px);height:auto !important;}
.padding{padding:20px;}
.table{display:table;width:100%;}
.cell{display:table-cell;}
.bg{background:#ccc;}
I think it is not happening because I have
.wrapper{min-height:calc(100% - 60px);height:auto !important;}
It happens if I change .wrapper to
.wrapper{height:calc(100% - 60px);}
then it is happening.
Here is the fiddle.
