Here is 2 column markup using display: table
and display: table-cell
CSS declarations:
.table {_x000D_
display: table;_x000D_
}_x000D_
_x000D_
.cell {_x000D_
border: 2px solid black;_x000D_
vertical-align: top;_x000D_
display: table-cell;_x000D_
}_x000D_
_x000D_
.container {_x000D_
height: 100%;_x000D_
border: 2px solid green;_x000D_
}
_x000D_
<div class="table">_x000D_
<div class="cell">_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
</div>_x000D_
<div class="cell">_x000D_
<div class="container">Text</div>_x000D_
</div>_x000D_
</div>
_x000D_
But .container
block does not fill parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2.
What I have | What I need
Please, do not propose JS solution.
This question is related to
html
css
css-tables
When you use %
for setting heights or widths, always set the widths/heights of parent elements as well:
.table {_x000D_
display: table;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.cell {_x000D_
border: 2px solid black;_x000D_
vertical-align: top;_x000D_
display: table-cell;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.container {_x000D_
height: 100%;_x000D_
border: 2px solid green;_x000D_
-moz-box-sizing: border-box;_x000D_
}
_x000D_
<div class="table">_x000D_
<div class="cell">_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
<p>Text_x000D_
</div>_x000D_
<div class="cell">_x000D_
<div class="container">Text</div>_x000D_
</div>_x000D_
</div>
_x000D_
set height: 100%;
and overflow:auto;
for div inside .cell
This is exactly what you want:
HTML
<div class="table">
<div class="cell">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="cell">
<div class="container">Text</div>
</div>
</div>
CSS
.table {
display: table;
height:auto;
}
.cell {
border: 2px solid black;
display:table-cell;
vertical-align:top;
}
.container {
height: 100%;
overflow:auto;
border: 2px solid green;
-moz-box-sizing: border-box;
}
In Addition to jsFiddle, I can offer an ugly hack if you wish in order to make it cross-browser (IE11, Chrome, Firefox).
Instead of height:100%;
, put height:1em;
on the .cell
.
Define your .table
and .cell
height:100%;
.table {
display: table;
height:100%;
}
.cell {
border: 1px solid black;
display: table-cell;
vertical-align:top;
height: 100%;
}
.container {
height: 100%;
border: 10px solid green;
}
Make the the table-cell position relative, then make the inner div position absolute, with top/right/bottom/left all set to 0px.
.table-cell {
display: table-cell;
position: relative;
}
.inner-div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
table{
height:1px;
}
table > td{
height:100%;
}
table > td > .inner{
height:100%;
}
Confirmed working on:
Source: Stackoverflow.com