CODEWITHSUNDEEP
csshtml
Herbert
Herbert

Reputation: 5645

Min-height 100% inner div

I want to have two nested div's:

<div class="outer">
    <div class="inner">A div in a div!!!</div>
</div>

Which both should be at least the height of the window. So of course, I set the height of html and body to 100%, such that the outer div can have a min-height:100%, and since the height of the html and body elements are known, this is well defined.

However, min-height does not say anything about the actual height of the outer div. Hence it is not defined when the inner div is 'calculated'. The inner div may force the outer one to become bigger, or the inner div may be less tall than the outer div.

As far as I googled, I found 2 solutions, which each break in the situations above:

http://jsfiddle.net/5ML3W/

.outer {
    min-height: 100%;
    height: 100%;
    width: 500px;
    background: green;
}
.inner {
    width: 250px;
    margin-left: 50px;
    min-height:100%;
    background: red;
}
html, body{
    height:100%;
}

http://jsfiddle.net/bkjHa/1/

.outer {
    min-height: 100%;
    width: 500px;
    background: green;
}
.inner {
    width: 250px;
    margin-left: 50px;
    min-height:100%;
    background: red;
}
html, body{
    height:100%;
}

Essentially the difference is the height property for the outer div.

How can I force my inner div to be at least 100% of the window size and my outer div to stretch if the inner div becomes larger?

In my real world application the outer div is transparent, so I wouldn't really care. However, I am a bit curious, a fix or an explanation that what I want is not possible would be nice!

Upvotes: 3

Views: 1892

Answers (1)

Charles Ingalls
Charles Ingalls

Reputation: 4561

I actually got quite curious about how to solve this "issue". It works the way you want it if you apply display: table to the outer div and display: table-cell on the inner div.

1. Fiddle: Minimum height 100% without any content http://jsfiddle.net/5ML3W/1/

2. Fiddle: Both div's expand if content is added to the inner div http://jsfiddle.net/TVY6K/

And here is the CSS:

html, body{
    height:100%;
    margin: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
 }

.outer {
    height: 100%;
    width: 500px;
    background: green;
    display: table;
    padding: 0 50px;

}
.inner {
    display: table-cell;
    width: 250px;
    background: red;
}

Upvotes: 3

Related Questions