高度: < div > 内部 < div > 为100% ，并显示: table-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;


}

Demo

小开

最佳答案

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>

小开

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;
}

小开

set height: 100%; and overflow:auto; for div inside .cell

小开

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.

小开

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:

Chrome 60.0.3112.113, 63.0.3239.84
Firefox 55.0.3, 57.0.1
Internet Explorer 11