0

Ok, so I'm watching this tutorial by Colt Steele (incredible instructor btw, check him out) and he is showing how to design something using flex box. Since he is using the body as the flex container, he sets the body height to:

body {
    min-height: 100vh;
}

what is the initial height of the body element? I would think the body takes up 100% width and 100% height already.

Override
  • 1
  • 1
  • 1
    Using `min-height: 100vh` means that the "minimum" height of the `` will be 100% of the viewport height. Without `min-height` the body's height would only be as big as the generated box's containing block. – Tanner Dolby Mar 03 '21 at 03:45
  • Thanks for answering so quickly! I understand that part, but why does this need to be specified? Because the background color on the body automatically takes up the entire height and width of the viewport. What would be the height of the body if it wasn't specified? – Override Mar 03 '21 at 03:48
  • No problem. It needs to be specified to make sure the flex container covers 100% of the viewport height. Without `min-height: 100vh`, the body will only cover the content in it's containing block (which most likely won't be 100% of the viewport height, unless you have a lot of content). Take away `min-height` in your code and see the difference firsthand. – Tanner Dolby Mar 03 '21 at 03:49
  • 1
    That makes sense now that the body will only cover the content its containing. I found this somewhere else on stack overflow "There is a weird thing in CSS where the background-color on floods the whole viewport even if the metrics of the element itself don't cover that whole area. Unless the background-color gets set on the html element, then it doesn't." So that is what was making it confusing understanding where the body element really is. If I set a different color background on the html element, it is a lot easier to see. – Override Mar 03 '21 at 04:02
  • The `` is the most immediate child of the `document` in the DOM tree. So when you give the body a background-color, the whole page will take that color. But when your using a flex container, you want `min-height: 100vh` so the flex containers content will span 100% of the viewport at minimum. – Tanner Dolby Mar 03 '21 at 04:32

0 Answers0