显示中的跨浏览器全高元素：table-cell

Question

我写这个问题是为了整合这个网站上的多个类似问题，最后得到一个正确的yes或no答案。 一些现有的答案被错误地标记为正确，而实际上它们不能正常工作。

已阅读，相关问题。

• height: 100% for <div> inside <div> with display: table-cell
• Making inner div heights 100% with css in a table-cell
• Full height div inside td
• DIV stretch to height 100% in a table cell
• Getting div to occupy full cell height
• How to make <div> fill <td> height

给定以下标记：

<div class="equal-height">
    <div class="col-50">
        <div class="cell-fill">
            ...
        </div>
    </div>
    <div class="col-50">
        <div class="cell-fill">
            ...
        </div>
    </div>
</div>

是否有可能在以下浏览器中仅使用 CSS 使具有 cell-fill 类的 div 跨越其容器高度的 100%？

• Chrome - 最新
• Opera - 最新
• Safari - 最新
• Firefox - 最新
• IE9+

我能得到的最接近的是this example：

给出的版本适用于最新的 Chrome、Opera、Safari 和 Firefox。它也适用于 IE11，但无法在 IE9 和 IE10 上填充全高。

在这些浏览器中，如果外部 equal-height 元素的高度设置为大于最小列的像素值，则 cell-fill 的高度将会增加，因此也许可以根据该行为找到解决方案。

当前 CSS

/* 
 * 1. Stop columns and rows collapsing. 
 * 2. Set height so Chrome and IE11 work. 
 */
.equal-height {
    display: table;
    table-layout: fixed; /*1*/
    height: 1px; /*2*/
    width: 100%;
}

/* 
 * 1. Inherit and pass on height. 
 * 2. Fill full height. 
 */
.col-50{
    width:50%;
    height:100%; /*1*/
    display:table-cell; /*2*/
}

/* 
 * 1. Force Layout. 
 * 2. Fill full height. 
 * 3. So we can see it.
 */
.cell-fill{
    display:table; /*1*/
    height:100%; /*2*/
    background-color: #ff69b4 /*3*/
}

Answer 1

我不知道为什么人们总是错过显示：table-row 容器。这是一个适用于 FF（当前）、Chrome（当前）、Safari（当前）和 IE 9、10 和 11 的解决方案：

http://jsfiddle.net/fwuuhwpo/

答案是制作一个完整的包装器display: table，一个完整的行display: table-row，以及两个等宽的单元格display: table-cell。

HTML

<div class="equal-height">
    <div class="col-row">
        <div class="cell-fill">
            Dejah Thoris related many interesting facts and legends concerning this lost race of noble
            and kindly people. She said that the city in which we were camping was supposed to have been
            a center of commerce and culture known as Korad. It had been built upon a beautiful,
            natural harbor, landlocked by magnificent hills. The little valley on the west front of the
            city, she explained, was all that remained of the harbor, while the pass through the hills
            to the old sea bottom had been the channel through which the shipping passed up to the city's
            gates.
        </div>
        <div class="cell-fill">
            Dejah Thoris related many interesting facts and legends concerning this lost race of noble
            and kindly people.
        </div>
    </div>
</div>

CSS

.equal-height {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.col-row {
    display: table-row;
    height: 100%;
}

.cell-fill {
    width: 50%;
    display: table-cell;
    height: 100%;
    background-color: #ff69b4;
}

Answer 2

试试这个： http://codepen.io/anon/pen/jEeKxP

我认为诀窍是将div 和position: absolute 放在带有position: relative 的div 中。您还必须确保它一直到 body 的高度为 100%。

html, body {
  height: 100%;
  overflow: hidden;
}
.table-div {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-cell {
  display: table-cell;
  float: none;
  padding: 0;
  vertical-align: top;
}
.full-height {
  height: 100%;
}
.relative-wrapper {
  position: relative;
  height: 100%;
}
.scroll-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#col1 {
  width: 15%;
}

#col2 {
  width: 25%;
  padding: 0;
}

#col3 {
  width: 60%;
}

<div class="table-div full-height">
  <div class="table-row full-height">
    <div id="col1" class="table-cell full-height">
      <div class="relative-wrapper">
        <div class="scroll-wrapper" style="background-color: red;">
          Col1
        </div>
      </div>
    </div>
    <div id="col2" class="table-cell full-height">
      <div class="relative-wrapper">
        <div class="scroll-wrapper" style="background-color: blue;">
          Col2
        </div>
      </div>
    </div>
    <div id="col3" class="table-cell full-height">
      <div class="relative-wrapper">
        <div class="scroll-wrapper" style="background-color: green;">
          Col3
        </div>
      </div>
    </div>
  </div>
</div>