Matthew C.
—You want to set the height of a div
to be the same height as the browser window. How do you do this?
The height
CSS property sets the height of an element and we use length units to define it. Length units can be absolute (such as pixels) or relative (such as rem). Absolute length units are always the same size, they are not relative to anything else. Relative length units are relative to something else, for example, the vh
unit is equal to 1% of the viewport’s height.
To make a div
the same height as the browser window, set the height of the div
to 100vh
:
height: 100vh;
Note that you may need to remove default margins added by the browser in your global CSS file:
* { margin: 0; }
Setting an element’s height to 100vh to fill the browser window works in desktop browsers but it doesn’t work quite so well in mobile browsers. This is because the height of the UI of a mobile browser changes as you scroll down a website. In Google Chrome for Android, for example, the navigation bar at the top moves out of view as you scroll down and reappears as you scroll up. This means that the available height of the viewport changes as you scroll. If you set height
to 100vh
, the div
will take up more than 100% of the available height of the viewport when the browser’s UI is showing and the lowest portion of the div
will not be visible
If it’s important that your div
takes up 100% of the available screen height, you can find one way to do so in this article. This solution uses JavaScript to calculate the available height of the viewport using window.innerHeight
and then sets a CSS custom variable of 1% of the available height. The custom variable can be used to set the height of a div
to 100% of the available viewport. A resize
event listener is used to recalculate the available height each time the window is resized or the browser navigation UI moves out of view on scroll.
New CSS units that account for dynamic toolbars in mobile browsers are beginning to be supported by browsers, such as the dynamic viewport height (dvh
) unit, which will solve the problem described here.
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.
Here’s a quick look at how Sentry handles your personal information (PII).
×We collect PII about people browsing our website, users of the Sentry service, prospective customers, and people who otherwise interact with us.
What if my PII is included in data sent to Sentry by a Sentry customer (e.g., someone using Sentry to monitor their app)? In this case you have to contact the Sentry customer (e.g., the maker of the app). We do not control the data that is sent to us through the Sentry service for the purposes of application monitoring.
Am I included?We may disclose your PII to the following type of recipients:
You may have the following rights related to your PII:
If you have any questions or concerns about your privacy at Sentry, please email us at compliance@sentry.io.
If you are a California resident, see our Supplemental notice.