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.

Answer 2

As specification says

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

So Opera/Presto's behaviour is buggy in this case. Note that Opera 15+ behaves correctly.

The CSS3 draft allows using units that are relative to the viewport. So in this special case you can set

div {
    height: auto;
    min-height: 100%;  /* fallback for browsers that doesn't support "vh" */
    min-height: 100vh; /* vh == 1% of viewport height */
}

Answer 3

try replace the:

height: auto !important;

on to:

height: inherit !important;

in this case it working but it still height property set the size of divs not min-height.

Answer 4

I think we may have a bit of an XY Problem here. It looks like you've tried to implement a workaround for min-height to get it working in ancient Internet Explorer, but that workaround isn't working in other browsers.

In order to get the desired cross browser min-height try using height:auto; on .d3 and adding an IE conditional comment for IE 6 and below.

Working Example

html, body {
    height: 100%;
}
div {
    height:100%;
    min-height:100%;
}
.d1 {
    background: #3cc;
}
.d2 {
    background: #ddd;
}
.d3 {
    background: #c00;
    height:auto;
}

Add this to your HTML document to support IE6 and under :

<!--[if lte IE 6]>
<style>
.d3 { 
   height: 100%; 
}
</style>
<![endif]-->

Tested and working in Firefox, Chrome, Safari, Opera, IE10, IE9, IE8, IE7, IE6, and IE5.

All the divs are getting height:100%; and min-height:100%;. On .d3 height:100%; is being overridden by height:auto; due to the selector's specificity, but it still retains min-height:100%;.

For Internet Explorer 6 and under the conditional CSS will be applied to .d3 and override height:auto; with height:100%;

This works because (thankfully?) IE treats "height" how "min-height" is supposed to be treated.
-CSS Tricks

Answer 5

The first important thing, please try to add CSS Reset scripts.

for demo i'm just reset the margin and padding to 0.

CSS :

* {
    margin: 0;
    padding: 0;
}

Then don't use height: auto !important; because the browser will calculates the height based on the child and this is default value.

Add box-sizing properties to allows you to define certain elements to fit an area in a certain way.

And for value use border-box. This value will specified the width and height (and min/max properties) on this element determine the border box of the element. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified width and height properties

The box-sizing property is supported in IE(8+), Opera(8.5+), Chrome(*), and Safari(3).

For IE 6/7 you can use a polyfill for box-sizing: border-box by Christian Schepp Schaefer

This article about box-sizing by Chris Coyier.

And this complete solution and works cross browser. Demo

HTML :

<div class="first">
    First DIV
    <div class="second">
        Second DIV
        <div class="third">
            <div class="fourth">
                Fourth DIV
            </div>
        </div>
    </div>
</div>

CSS :

* {
    margin: 0;
    padding: 0;
}
html,body{
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
}

div{
    min-height: 100%;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(pathto/boxsizing.htc); /* Add the behavior/HTC after every box-sizing: border-box. You must add prefix with a star so IE6/7 can see it */
}

.first{
    padding:50px;
    background: red;
}

.second{
    padding:25px;
    background: green;
}

.third{
    background: yellow;
}

.fourth{
    background: brown;
}

Answer 6

Fiddle: http://jsfiddle.net/YYcLJ/5/

I would use position: absolute on the div elements. Then you will get the desired result.

div{
  position: absolute;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: 100%;
}

This works because absolute positioning takes the div elements out of the flow of the document allowing their heights to be as specified. Since we do not declare the top or bottom of the div elements their top location will be the same as though their positioning was static.

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height