Make <body> Take Up 100% of the Browser Height | kirupa.com

#1

by kirupa | 11 June 2015

Ok, so here is the setup! A short while ago, I was trying to listen for mouse events on the body of a mostly empty page. What I wanted to do was make the body element take up the full height of the page so that I have a giant hit target that I can do all sorts of event-related shenanigans on. Knowing what I had to do, I specified the body element in the HTML and wrote some CSS that looked as follows:

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/make_body_take_up_full_browser_height.htm
#2

Hey Kirupa!

I’ve one tiny problem. So I did

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

Even though the height of the body covers all the viewport, the immediate child (the root of a react app, a div doesn’t stretch to the same height on giving height: 100%). The child only takes the stretch when I do body {height: 100%}. How do I solve this?

#3

Also I read this: https://stackoverflow.com/questions/20681420/css-height-not-working-if-body-has-min-height.

#4

Do you have an example of your page? Another thing you can try is using viewport units:

body {
    height: 100vh;
}

That may set your page’s size to your browser’s height without any additional fuss. At least, that’s how it seems to render in my brain :stuck_out_tongue:

#5 
html, body {
    height: 100%;
    overflow: auto; <- this is the fix
}

min-height wont allow children to inherit height. Unless you inherit min-height. VH and VW have mobile issues because the url bar and actions bar come in and out the viewport height changes and therefore so does your content height. This has a horrible jumping effect.