0

I know how to set two divs stacked one before the other to make the second fill all the page's height if they are defined with percentages, but how if the first div's height is defined in "em"?

body{
  height:100%;
  background-color:yellow;
}
#Header{
  height:3em;
  border:solid 2px black;
  background-color:red;
}

#Content{
  border:solid 2px black;
  background-color:green;
  height:To fill body.. ????
}

Here is the Fiddle. (Updated)

MorgoZ
  • 2,012
  • 5
  • 27
  • 54

1 Answers1

0

Part of your problem is that none of the parents to #Body has an explicit height set -- because % values don't work; % of what?

All I did here was change the height value of body to vh instead of %

https://jsfiddle.net/btrartv0/3/

Edit: I just looked at your comment, and perhaps im missing something, because it looks like everything would work as expected with regards to your intentions in your latest fiddle update.

enter image description here

Pytth
  • 4,008
  • 24
  • 29
  • Sorry, i missed setting html height. Your answer does not work properly; please take a look at the new Fiddle updated in my question; i've set overflow in body and if you set the Body div to height 100% (it doesn't matter if body's height is in % or hv), it will not grow to fit the body, it will grow heighter. Note: i've also changed the div's names to not talk about body and Body ;) Thanks. – MorgoZ Sep 20 '17 at 05:54
  • Did you try setting the height to `vh` units? In your comment you said you have tried setting it to `hv` but that is not the proper property. – Pytth Sep 20 '17 at 12:55
  • yes, vh, take a look to the Fiddle. – MorgoZ Sep 20 '17 at 15:59
  • I just updated my answer. I am confused because your fiddle looks like it's working as expected. – Pytth Sep 20 '17 at 16:05
  • The problem is that it is generating scrollbars because the Content + Header are highter that the body. I want the content to FILL the body, so the height of the Content should be body - Header, and with your answers the Content's height is the SAME as the body (so the scrollbars). BTW, the answers of @DiegoRosales and Paulie_D are correct, just in case you want to test a working solution with no scrollbars. – MorgoZ Sep 20 '17 at 16:23