Cross browser full height element within display:table-cell

Question

I'm writing this question in an attempt to consolidate the multiple similar questions on this site and finally get a proper yes or no answer to the question. Several existing answers have been incorrectly marked as correct when, in fact, they do not work properly.

Already read, related questions.

• 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

Given the following markup:

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

Is it possible to get the divs with the class cell-fill to span 100% of their container height using CSS alone across the following browsers?

• Chrome - Latest
• Opera - Latest
• Safari - Latest
• Firefox - Latest
• IE9+

The closest I can get is this example:

The version given works in latest Chrome, Opera, Safari, and Firefox. It also works in IE11 but fails to fill full height on both IE9 and IE10.

In those browsers the height of the cell-fill will grow if the outer equal-height element has its height set to a pixel value greater than the smallest column so perhaps a solution can be found based on that behaviour.

Current 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

Try this: http://codepen.io/anon/pen/jEeKxP

I think the trick is to place a div with position: absolute inside a div with position: relative. You also have to make sure it's 100% height all the way up to the 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>

Answer 2

I don't know why people always miss the display: table-row container. Here is a solution that works in FF (current), Chrome (current), Safari (current) and IE 9, 10, and 11:

http://jsfiddle.net/fwuuhwpo/

The answer is to make a complete wrapper that is display: table, a full row that is display: table-row, and two equal-width cells that are 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;
}