Question

Im trying to have one div which has min height 100% and antoher within with min height 100% as well.

I am not allowed to touch the markup, it has to be done with pure css. It also must work in IE6+ so i cant use display:table.

How can i achieve this?

Currently i have html,body set to height:100%, wrapper set to min-height:100% but then the inner div needs the outer div to have a height setting in order to have a % setting itself…

What is the best solution for this problem?

Answer 1

If you need to support IE6, min-height is out of the picture.

You could use min-height in other browsers and add a conditional statement to set height rather than min-height in IE.

IE8 and above support min-height.

For the browser that do support min-height, you don’t actually need to nest min-height declarations. You only need min-height on the outer element, the inner element uses height.

Example: http://jsfiddle.net/dmyN6/

body, html {
    height: 100%;   
}

.a {
    min-height: 100%;   
    background-color: blue;
}

.b {
    height: 100%;
    background-color: aqua;    
}