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

Question

我写这个问题是为了巩固该网站上的多个类似问题，并最终得到该问题的正确的是或否答案。一些现有的答案被错误地标记为正确，而实际上它们无法正常工作。

已阅读相关问题。

• 高度：<div> 内的 <div> 为 100%，显示：表格单元格
• 使用表格单元格中的 css 使内部 div 高度为 100%
• td 内的全高 div
• 表格单元格中的 DIV 拉伸至高度 100%
• 让 div 占据整个单元格高度
• 如何让<div>填充<td>高度

给出以下标记：

<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 - 最新
• 歌剧 - 最新
• Safari - 最新
• 火狐 - 最新
• IE9+

我能得到的最接近的是这个例子：

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

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

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

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

我认为诀窍是将 a divwith放在position: absolutediv with 内position: relative。您还必须确保它一直到 100% 的高度body。

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>