height: 100% for <div> inside <div> with display: table-cell
Solution 1:
When you use % for setting heights or widths, always set the widths/heights of parent elements as well:
.table {
display: table;
height: 100%;
}
.cell {
border: 2px solid black;
vertical-align: top;
display: table-cell;
height: 100%;
}
.container {
height: 100%;
border: 2px solid green;
-moz-box-sizing: border-box;
}<div class="table">
<div class="cell">
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
</div>
<div class="cell">
<div class="container">Text</div>
</div>
</div>Solution 2:
table{
height:1px;
}
table > td{
height:100%;
}
table > td > .inner{
height:100%;
}
Confirmed working on:
- Chrome 60.0.3112.113, 63.0.3239.84
- Firefox 55.0.3, 57.0.1
- Internet Explorer 11