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

Question

Here is 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 does not work (but works in Opera):

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

Thus, 100% of the height should apply to all divs before html. But this only happens for the first DIV :(

Opera works correctly. The first DIV becomes 100% of the body, the second - 100% of the first div, etc.

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

Answer 1

As the spec says

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

Thus, the behavior of Opera / Presto in this case is an error. Please note that Opera 15+ is behaving correctly.

The CSS3 project allows the use of units related to the viewport. Therefore, 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 2

To do this, you only need to provide a div for height 100%; so that it works. In addition, as your hierarchy, you also need to change the display your divs .

This solution works with cross browser. You can check.

Here is a WORKING DECISION

HTML:

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

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 */ } 

Hope this is what you were looking for.

Answer 3

try replacing:

 height: auto !important; 

by:

 height: inherit !important; 

In this case, it works, but the height property still sets the size of the divs not min-height.

Answer 4

I think there might be a bit of XY Problem here . It looks like you tried to implement a workaround for min-height to make it work in the old Internet Explorer, but this workaround does not work in other browsers.

To get the required cross-browser min-height , try using height:auto; on .d3 and add a conditional IE 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 below:

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

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

All divs get height:100%; and min-height:100%; . At .d3 height:100%; overridden height:auto; due to the specificity of the selector , but it still retains min-height:100%; .

For Internet Explorer 6 and conditional CSS will apply to .d3 and override height:auto; using height:100%;

This works because (fortunately?) IE is considering "height", as it is supposed to handle the "minimum height".
- CSS tricks

Answer 5

The first thing to do is try adding CSS Reset scripts.

for demonstration, I just reset margin and padding to 0 .

CSS:

 * { margin: 0; padding: 0; } 

Then do not use height: auto !important; , because the browser will calculate the height based on the child, and this is the default value.

Add box-sizing properties so you can define specific elements for a specific area.

And to use the value of border-box . This value will indicate the width and height (and the minimum / maximum properties) of this element, defining the frame field of the element. The width and height of the content are calculated by subtracting the borders and filling 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 polyfill for box-sizing: border-box Christian Schepp Schaefer

This article is about box-sizing from Chris Coyier .

And this is a complete solution and cross-browser works. 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 for 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 removes div elements from the document stream, allowing their heights to be as specified. Since we do not declare the top or bottom elements of div elements, their top location will be the same as if their positioning was static.

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