How to make a div the same height as the browser window

This content originally appeared on Level Up Coding - Medium and was authored by Johnny Simpson

You might think that making a div element the same height as your browser would be as easy as this:

div {
    height: 100%;
}

However, it is unfortunately not. If you’re wondering why height: 100%; doesn't work to make an element the full height of the screen, it's because a height has to be defined to use percentages in CSS. Since body tags have no predefined heights, CSS doesn't know what 100% means here. So the div element doesn't become 100% of the browser's height.

How to make a div the same height as the window

Making a div the same height as your browser window is relatively straight forward, and it starts with understanding a unit called vh. vh, which stands for viewport height, is a unit representing the current height of your browser window. 100vh is the full height, and any number less than that is a percentage of that height.

Instead of writing height: 100%, we can apply height: 100vh to any element to make it the same size as the browser window.

div {
    height: 100vh;
}

It also works for 100vw, which represents the full width of the browser window, vw standing for viewport width.

Level Up Coding

Thanks for being a part of our community! More content in the Level Up Coding publication.
Follow: Twitter, LinkedIn, Newsletter
Level Up is transforming tech recruiting ➡️ Join our talent collective

How to make a div the same height as the browser window was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Level Up Coding - Medium and was authored by Johnny Simpson

Print Share Comment Cite Upload Translate Updates

APA

Johnny Simpson | Sciencx (2022-07-06T14:25:43+00:00) How to make a div the same height as the browser window. Retrieved from https://www.scien.cx/2022/07/06/how-to-make-a-div-the-same-height-as-the-browser-window-2/

MLA

" » How to make a div the same height as the browser window." Johnny Simpson | Sciencx - Wednesday July 6, 2022, https://www.scien.cx/2022/07/06/how-to-make-a-div-the-same-height-as-the-browser-window-2/

HARVARD

Johnny Simpson | Sciencx Wednesday July 6, 2022 » How to make a div the same height as the browser window., viewed ,<https://www.scien.cx/2022/07/06/how-to-make-a-div-the-same-height-as-the-browser-window-2/>

VANCOUVER

Johnny Simpson | Sciencx - » How to make a div the same height as the browser window. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/06/how-to-make-a-div-the-same-height-as-the-browser-window-2/

CHICAGO

" » How to make a div the same height as the browser window." Johnny Simpson | Sciencx - Accessed . https://www.scien.cx/2022/07/06/how-to-make-a-div-the-same-height-as-the-browser-window-2/

IEEE

" » How to make a div the same height as the browser window." Johnny Simpson | Sciencx [Online]. Available: https://www.scien.cx/2022/07/06/how-to-make-a-div-the-same-height-as-the-browser-window-2/. [Accessed: ]

rf:citation

» How to make a div the same height as the browser window | Johnny Simpson | Sciencx | https://www.scien.cx/2022/07/06/how-to-make-a-div-the-same-height-as-the-browser-window-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.