1

I made the following code pen to illustrate my issue. https://codepen.io/anon/pen/OmGZed

In my example i have a header, and the rest of the page to the bottom is the body. Inside that is a child that i want to inherit the height of the bottom container.

So the .body element has the right height, but the .child element does not seem to want to inherit its parent height.

Is there a way to make the child inherit .body height? I tried height: 100% and height: inherit

But nothing seems to work. Interestingly FF works Chrome or IE does not.

Tim
  • 3,576
  • 6
  • 44
  • 58
  • 1
    https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work *"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 value computes to 'auto'."* so `100%` of `auto` (the parent) is `auto` – Michael Coker May 26 '17 at 18:45

1 Answers1

3

Add height: 100% to both .body and .child. You need to specify the height on the parent for height: 100% to work.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180