Make body have 100% of the browser height
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
In web development, ensuring that the body of the HTML document stretches to 100% of the browser height can be crucial for many design layouts, particularly when you want to create full-page sections or have background colors that stretch across the entire visible area of the browser. By default, the body tag does not automatically expand to cover the full height of the viewport; it only expands as much as the content it contains. This article will explain how to make the body of your website take up 100% of the browser height using CSS, discuss potential issues and solutions, and include practical examples.
Understanding the CSS Properties
Viewport Height (vh)
One useful CSS unit for achieving full-screen sections is the viewport height (vh). One vh is equal to 1% of the height of the viewport. Using vh can help you set the height of an element relative to the viewport height:
This simple declaration sets the minimum height of the body to be at least as tall as the viewport, regardless of how much content it contains.
Percentage Height (%)
Alternatively, you might try using percentage values:
However, this approach requires the height of the parent elements to be defined. Since the body is a child of the html tag, you must also set the height of html to 100% for this to work effectively.
Practical Example
Let’s implement a full viewport height design using both methods discussed:
Example using vh
In this example, the body will always fill the viewport vertically, making the message appear at the center. This method is simple and effective, especially when you do not need to worry about older browsers that do not support the vh unit.
Example using %
Here, both the html and body elements are set to 100% height, ensuring that the body element covers the entire viewport.
Consideration for Older Browsers
While using vh is a robust modern approach, it's important to be aware that very old browsers might not support this unit. For full support, the percentage method may be more compatible but requires the additional step of setting the height of the html tag.
Summary Table
| Method | Description | Browser Compatibility |
100vh | Sets the minimum height of the body to the full viewport height | Modern browsers |
100% | Expands the body height to 100%, requires parent's height to be set | Broad compatibility |
Concluding Notes
Using 100vh provides a clean and modern approach to setting the full height of a webpage, but be mindful of its limitations in non-modern browsers. The percentage method can serve as an alternative with broader compatibility, but it may require setting additional parent styles.
With a clear understanding of these techniques, web developers can precisely control the layout of their pages, ensuring optimal display on various devices and browsers.
