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

**URL:** <https://forum.kirupa.com/t/make-body-take-up-100-of-the-browser-height-kirupa-com/633328>\
**Category:** programming\
**Created:** [June 12, 2015, 12:32am UTC](https://forum.kirupa.com/t/make-body-take-up-100-of-the-browser-height-kirupa-com/633328 "2015-06-12T00:32:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 12, 2015, 12:32am UTC](https://forum.kirupa.com/t/make-body-take-up-100-of-the-browser-height-kirupa-com/633328/1 "2015-06-12T00:32:44Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 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](http://www.kirupa.com/html5/make_body_take_up_full_browser_height.htm)

---

<div class="post-metadata">

**Author:** ![gdad\_s\_river](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gdad_s_river/32/8480_2.png) [@gdad\_s\_river](https://forum.kirupa.com/u/gdad_s_river)\
**Post date:** [May 27, 2017, 9:44am UTC](https://forum.kirupa.com/t/make-body-take-up-100-of-the-browser-height-kirupa-com/633328/2 "2017-05-27T09:44:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gdad\_s\_river](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gdad_s_river/32/8480_2.png) [@gdad\_s\_river](https://forum.kirupa.com/u/gdad_s_river)\
**Post date:** [May 27, 2017, 10:03am UTC](https://forum.kirupa.com/t/make-body-take-up-100-of-the-browser-height-kirupa-com/633328/3 "2017-05-27T10:03:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 27, 2017, 11:27am UTC](https://forum.kirupa.com/t/make-body-take-up-100-of-the-browser-height-kirupa-com/633328/4 "2017-05-27T11:27:03Z")

</div>

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 😛

---

<div class="post-metadata">

**Author:** ![GreggsWorld](https://avatars.discourse-cdn.com/v4/letter/g/4af34b/32.png) [@GreggsWorld](https://forum.kirupa.com/u/GreggsWorld)\
**Post date:** [January 10, 2019, 12:08pm UTC](https://forum.kirupa.com/t/make-body-take-up-100-of-the-browser-height-kirupa-com/633328/5 "2019-01-10T12:08:22Z")

</div>

```auto
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.