0

Based on this post (and others):

Make body have 100% of the browser height

It seems like it's reasonable to do this:

html {
  height: 100%;
}
body {
  min-height: 100%;
}

in order to stretch the background to the entire viewport. but why is this

different from 

html {
  height: 100%;
}
body {
  height: 100%;
}

?

Compare this: https://codepen.io/benrhere/pen/bGGBVQy enter image description here

with this: https://codepen.io/benrhere/pen/ExxNVGW enter image description here

Specifically setting an inner div to height:100% seems only to work when we set height=100% on the body, but NOT when we set max-height=100%.

BenjiFB
  • 4,545
  • 10
  • 46
  • 53
  • in the first codepen, the css of body is not `height: 100%;` it's `max-height: 100%;` look at this: https://www.w3schools.com/code/tryit.asp?filename=G94BB9HVNKS4 and this https://www.w3schools.com/code/tryit.asp?filename=G94BBUUCB8UG – Shiz Oct 19 '19 at 02:42
  • min-height and height used with percentage are relative to Height ... so if there is no height defined, they won't work and will never consider min-height as reference – Temani Afif Oct 19 '19 at 09:45
  • Apologies about the max/min height mixup. I've corrected the first codepen, but see the same results. So, are you saying I can't have a min-height=100% when the parent has a defined height of the entire viewport? – BenjiFB Oct 19 '19 at 11:57
  • percentage on height,min-height,max-height uses the height of the parent as reference so if a child is using one of the three the parent need to have Height defined, not max-height or min-height – Temani Afif Oct 19 '19 at 19:20

0 Answers0