html - examples - table css generator

altura: 100% para<div> dentro de<div> con display: table-cell

Question

Aquí hay 2 marcas de columna usando display: table y display: table-cell declaraciones CSS de display: table-cell :

.table {
display: table;
}
.cell {
border: 2px solid black;
vertical-align: top;
display: table-cell;
}
.container {
height: 100%;
border: 2px solid green;
}

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

Pero .container block no llena la célula padre verticalmente. Aquí hay un ejemplo en JsFiddle: http://jsfiddle.net/MGRdP/2 .

Lo que tengo | Lo que necesito

Por favor, no proponga la solución JS.

Answer 1

Además de jsFiddle, puedo ofrecer un hack feo si lo deseas para hacerlo entre navegadores (IE11, Chrome, FF).

Póngase el .cell en lugar de la altura: 100%; altura: 1em;

Saludos, Saar

Answer 2

Cuando usa % para establecer alturas o anchuras, siempre establezca también los anchos / alturas de los elementos principales

prueba el violín actualizado

http://jsfiddle.net/MGRdP/6/

Answer 3

Defina su height:100%; .table y .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

Answer 4

Establezca la posición relativa de la celda de la tabla, luego haga que la posición div interna sea absoluta, con la parte superior / derecha / inferior / izquierda configuradas en 0px.

.table-cell {
display: table-cell;
position: relative;
}
.inner-div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}

Answer 5

Esto es exactamente lo que quieres:

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

Answer 6

height: 100%; ajuste height: 100%; y overflow:auto; para div dentro de .cell

Answer 7

table{
height:1px;
}
table > td{
height:100%;
}
table > td > .inner{
height:100%;
}

Confirmado trabajando en:

• Chrome 60.0.3112.113, 63.0.3239.84
• Firefox 55.0.3, 57.0.1
• Internet Explorer 11