html - 高度 : 100% for inside with display: table-cell

Question

这是使用 display: table 和 display: table-cell CSS 声明的 2 列标记:

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

但是 .container block 不会垂直填充父单元格。这是 JsFiddle 上的示例:http://jsfiddle.net/MGRdP/2 .

我有什么 | 我需要什么

请不要提出 JS 解决方案。

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