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


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


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?


Also I read this:


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:

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.