100% min-height working in Opera, but not in other browsers

Question

Here's the code I'm using:

html,body{
  height: 100%;
}

div{
  min-height: 100%;
  height: auto !important;
  height: 100%;                /* this is for older IE */
}

http://jsfiddle.net/YYcLJ/

This also fails (but works in Opera):

div{
  min-height: 100%;
  height: auto;
}

So 100% height should be applied to all divs until html. But this only happens for the first DIV :(

In Opera it works correctly. First DIV gets to be 100% of body, 2nd is 100% of first div, and so on...

Is there any way to make this work in other browsers too?

Answer 1

For that, you need to give only the div to have a height of 100%; for it to work. Plus, the way your hierarchy is, you need to change the display of your divs too.

This solution works cross browser. You can check.

Here is the WORKING SOLUTION

The HTML:

<div class="d1">
    <div class="d2">
        <div class="d3">
            hi
        </div>
    </div>
</div>    

The CSS:

html,body{
     height: 100%; /* Change 01. Div with height of 100% */
}

div{
  height: 100%;
}

.d1{
    background: #3cc;
    display:table; /* Change 02. Changing display of Divs */
    width:100%;
    height:100%;
}

.d2{
    background: #ddd;
    display:table-row; /* Change 03. Changing display of Divs */
}

.d3{
  background: #c00;
  display:table-cell; /* Change 04. Changing display of Divs */

}

I hope this is what you were looking for.