HTML nested min-height

Question

HTML:

<div id="a">
  <div id="b">
  </div>
</div>

CSS:

  html, body {
    height: 100%;
    background: red;
    margin: 0;
  }
  #a {
    min-height: 100%;
    background: green;
  }
  #b {
    min-height: 100%;
    background: yellow;
  }

http://jsfiddle.net/otpxvb2u/

Why does the browser display green and not yellow?

Add `height:1px` to `#a` for [a work-around](http://jsfiddle.net/otpxvb2u/3/). — George, Sep 03 '14 at 08:19
`#a {height:inherit;}` [also works](http://jsfiddle.net/otpxvb2u/5/). — Moob, Sep 03 '14 at 09:10

CBroe · Accepted Answer · 2014-09-03T08:51:11.820

This combination simply can’t work.

Your outer element has a min-height – that means, it’s height actually depends on it’s content. If the content was larger than the 100%, then the actual height of the outer element would be more than those 100% the min-height specifies.

But now you want the inner element’s height to be a min-height of 100% as well – so the inner element would have to look for the outer element to determine its actual height, and the same thing the other way around for the outer element. That equation is just not solvable.

So you need to set an explicit height for the outer element: height:100%

EDIT pertaining to your comment:

Any explanation for why @George's work-around works?

height:1px acts as a kind of “starting value” for the equation.

The inner element has a definitive height to start with now, 1px – so for the outer element, the minimum of (100%, height-determined-by-height-of-child-element) can be determined now – and that will result in 100% (of the height of the parent of that outer element, body), which leads to a specific pixel value as the calculated value.

And now the min-height:100% for the inner element can kick in as well – the outer element has an effective value in pixels now, and so the minimum of (100% of that-pixel-value, 1px) can be calculated for the inner element as well, which will result in that same pixel value as the outer element has effectively.

Thanks for your very clear explanation. Any explanation for why @George's work-around works? — mushroom, Sep 03 '14 at 08:41
FYI: Simply setting `height:inherit;` on the `#a` also works. — Moob, Sep 03 '14 at 09:08

score 0 · Answer 2 · answered Sep 03 '14 at 08:18

0

Use height instead of min-height

#a {
    height: 100%;
    background: green;
}
#b {
    height: 100%;
    background: yellow;       
}

Updated DEMO

answered Sep 03 '14 at 08:18

Carl0s1z

4,683
7
32
47

score 0 · Answer 3 · answered Sep 03 '14 at 08:19

0

To inherit the hight, the parent element need a height definition. So add the height attribute to the parent.

#a {
    height: 100%;
    min-height: 100%;        
    background: green;
}

Fiddle

answered Sep 03 '14 at 08:19

Steven Web

1,966
13
23

score 0 · Answer 4 · answered Sep 03 '14 at 08:20

0

or may be you can fix the min-height in pixel

 #b {
    min-height: 200px;
    background: yellow;
  }

check the fiddle http://jsfiddle.net/otpxvb2u/4/

answered Sep 03 '14 at 08:20

supersaiyan

1,670
5
16
36

score 0 · Answer 5 · answered Sep 03 '14 at 08:20

0

Provide the height to #b

#b {
height: 100px;
....
....

or

give height: 100%; to #a and #b

#a,#b{
height:100%;
....
....

answered Sep 03 '14 at 08:20

Punitha Subramani

1,467
1
8
6

score 0 · Answer 6 · answered Sep 03 '14 at 08:30

0

#a
{
height:auto;
}

#b
{
height:auto;
min-height:200px;
}

answered Sep 03 '14 at 08:30

Shen Shen

72
2
12

HTML nested min-height

6 Answers6