Question

我正在撰写此问题，试图整合此网站上的多个类似问题，并最终获得正确的是或否问题的答案。实际上，当几个现有答案无法正常工作时，它们被错误地标记为正确。

已阅读相关问题。

给出以下标记：

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

在以下浏览器中，是否可以使用类cell-fill的div来跨越容器高度的100％单独使用CSS ？

Chrome - 最新
歌剧 - 最新
Safari - 最新
Firefox - 最新
IE9 +

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

所提供的版本适用于最新的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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我不知道为什么人们总是错过显示器：表行容器。这是一个适用于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;
}

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

2 个答案: