MyStory.html

# How to Make \ Take Up 100% of the Browser Height ? **URL:** \ **Category:** programming\ **Created:** [February 19, 2019, 2:43am UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417 "2019-02-19T02:43:57Z")\ **Posts on this page:** 9\ **Page:** 1

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [February 19, 2019, 2:43am UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/1 "2019-02-19T02:43:57Z")

Hello & Thanks , I have applied your method from your article: [https://www.kirupa.com/html5/make\_body\_take\_up\_full\_browser\_height.htm](https://www.kirupa.com/html5/make_body_take_up_full_browser_height.htm) But it isn’t working for me . I must be cancelling it out in some way . Below is the code , pls show me wherein my error is. Thanks ```auto MyStory.html

myMainHeading

leftNotes

Heading

Text

rightNotes

file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory-Cancel-EnterKey-Green-WORKING-RESTART.html

``` ---

**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:** [February 19, 2019, 7:22pm UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/2 "2019-02-19T19:22:07Z")

Try setting the `width` value to **100vw** and `height` to **100vh**. ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [February 20, 2019, 2:47am UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/3 "2019-02-20T02:47:41Z")

Thanks , but it doesn’t help . I tried it on body html and Table wrapper . Pls , what next ? I have been struggling with for 2 weeks . Thanks ```auto ``` ---

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [February 20, 2019, 3:39pm UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/4 "2019-02-20T15:39:08Z")

Kirupa suggestion of making the body height 100% does work. I took your page and stripped out the last two rows and gave the body a light green color to see it, and the browser showed the page rendering 100%. The best that I can determine is that it somewhere in your markup for the middle row that is causing you trouble. I say this because I changed the CSS for the last row to position: fixed; bottom: 0px; and it hugged the bottom of the browser window. ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [February 20, 2019, 3:51pm UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/5 "2019-02-20T15:51:17Z")

Thanks REB\_412 . > The best that I can determine is that it somewhere in your markup for the middle row that is causing you trouble. . Yes I agree , but I can’t figure it out. Thanks ---

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [February 20, 2019, 4:48pm UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/6 "2019-02-20T16:48:39Z")

Maybe it is because you do not have enough content in that middle row to expand to fill the whole browser window. What happens when you do have a lot of content there? ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [February 20, 2019, 11:16pm UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/7 "2019-02-20T23:16:04Z")

Yes , when I fill up the middle part the window fills up and adds scrollbar . I was hoping to expand the middle part to fill up the screen initially . But it’s not heading that way . Thanks ---

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\ **Post date:** [February 25, 2019, 2:47pm UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/8 "2019-02-25T14:47:07Z")

When there is not enough content to fill a page, especially when someone is viewing a webpage on a very large monitor, and you might have a footer you want to keep down at the bottom, I would use css flexbox on an outer wrapper: ``` display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; ``` Your main div that needs to keep it’s maximum height, stretched to fill, even with little content you can set: ``` flex: 1; display: flex; align-items: center; justify-content: center; ``` The last three properties will center it’s content in the main div. ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [February 26, 2019, 1:46am UTC](https://forum.kirupa.com/t/how-to-make-body-take-up-100-of-the-browser-height/639417/9 "2019-02-26T01:46:01Z")

Ok Thanks I’ll give it a shot . Never used flex , heard lots of probs with flex . Thanks