Высота: 100% для <div> внутри <div> с отображением: table-cell

Ответ 1

Когда вы используете % для установки высоты или ширины, всегда устанавливайте ширину/высоту родительских элементов:

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

Ответ 2

установите height: 100%; и overflow:auto; для div внутри .cell

Ответ 3

table{
   height:1px;
}

table > td{
   height:100%;
}

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

Подтвердили работу над:

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

Ответ 4

В дополнение к jsFiddle я могу предложить вам некрасивый хак, если вы хотите сделать его кросс-браузерным (IE11, Chrome, Firefox).

Вместо height:100%; поместите height:1em; в .cell.

Ответ 5

Это именно то, что вы хотите:

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

Ответ 6

Сделайте позицию ячейки таблицы относительной, затем сделайте внутреннюю позицию div абсолютной, а верхний/правый/нижний/левый все настроены на 0px.

.table-cell {
  display: table-cell;
  position: relative;
}

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

Ответ 7

Определите свои .table и .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;

    }

Демо