Setting Element Height to 100% of Browser Window

In web development, it’s common to encounter scenarios where an element needs to occupy the full height of the browser window. This can be particularly useful for creating layouts with columns or sections that should extend to the bottom of the viewport, regardless of their content size. Achieving this can seem straightforward but often involves understanding how CSS handles heights and viewports.

Understanding Viewport Units

To make an element 100% height of the browser window, you need to understand viewport units. The viewport is the visible area of a web page on a device screen. CSS introduces viewport-percentage lengths, which are relative to the size of the initial containing block (the viewport). These units include:

• vh: Viewport Height – 1vh equals 1% of the viewport’s height.
• vw: Viewport Width – 1vw equals 1% of the viewport’s width.
• vmin: The smaller of vw or vh.
• vmax: The larger of vw or vh.

Applying 100vh to an Element

To make a div (or any element) 100% height of the browser window, you can simply use the 100vh unit in your CSS. Here’s how:

<div id="fullHeightDiv"></div>

#fullHeightDiv {
    height: 100vh;
}

This will ensure that the #fullHeightDiv element is always as tall as the browser window, regardless of its position in the DOM or the size of its content.

Difference Between 100% and 100vh

It’s crucial to understand the difference between setting an element’s height to 100% versus 100vh. When you set an element’s height to 100%, it will be 100% of its parent’s height. If the parent’s height is not explicitly defined or is based on content, using 100% might not achieve the desired full-height effect.

On the other hand, 100vh directly relates to the viewport’s height, making it a more reliable choice when you want an element to span the entire browser window height, regardless of its parent elements’ sizes.

Using with Multiple Columns

When dealing with layouts that involve multiple columns, applying 100vh can be straightforward. Each column can have its height set to 100vh, and other CSS properties like float, flex, or grid can be used to manage the layout:

.left {
    height: 100vh;
    width: 50%;
    background-color: grey;
    float: left;
}

.right {
    height: 100vh;
    width: 50%;
    background-color: red;
    float: right;
}

Browser Support

Viewport units are widely supported across modern browsers. However, it’s always a good practice to check the latest support status on resources like Can I Use before implementing them in production environments.

Conclusion

Making an element 100% height of the browser window is achievable through the use of viewport units, specifically 100vh. This method provides a flexible and reliable way to create full-height elements that adapt to different screen sizes and orientations. Understanding how 100vh differs from percentage-based heights (100%) is key to effectively using this technique in various layout scenarios.