HTML vs Body: How to Set Width and Height for Full Page Size
When building web pages, one of the first things you‘ll want to do is set the overall dimensions of the page. This is commonly done by applying CSS styles to set the width and height of key elements. But which elements should you apply those styles to, and what values should you use? Is it better to set the size on the <html> element or the <body>?
As we‘ll see, there are some important differences between the <html> and <body> elements when it comes to dimensioning the page. Let‘s take a look at some common approaches and gotchas, as well as the current best practices for building responsive full-page layouts.
HTML vs Body: What‘s the Difference?
The <html> element is the root element of the document, meaning it contains all the content of the web page, including the <body>. The <body> element, as the name suggests, is where the main content of the page goes. Visually, the <body> is nested inside the <html>, like this:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Page content goes here.</p>
</body>
</html>So when setting CSS properties like width and height, you can target either the <html> or <body> element (or both). But the way these elements respond to those styles is not always the same.
Why Page Dimensions Matter
Before diving into the specifics of setting width and height on <html> vs <body>, it‘s worth considering why page dimensions are so important in the first place.
Back in the early days of the web, most pages were designed with a fixed width, typically around 960 pixels. This was a safe bet because most computer screens at the time had a resolution of 1024×768. Designing for a fixed width ensured that the content would fit on the majority of screens without horizontal scrolling.
However, as screen sizes and resolutions have proliferated, fixed-width designs have fallen out of favor. Nowadays, it‘s common for websites to receive traffic from a wide range of devices, from small smartphones to large desktop monitors. According to StatCounter, the most common screen resolutions as of January 2023 are:
| Resolution | Market Share |
|---|---|
| 1920×1080 | 22.79% |
| 1366×768 | 16.08% |
| 360×800 | 10.36% |
| 414×896 | 5.02% |
| 1536×864 | 4.76% |
As you can see, there‘s a lot of variation in screen sizes. To accommodate this diversity, responsive design techniques have become the norm. The goal of responsive design is to create layouts that adapt to different screen sizes, providing an optimal viewing experience on any device.
One key aspect of responsive design is setting the overall dimensions of the page using relative units like percentages or viewport units (e.g. vh and vw), rather than fixed pixel values. This allows the page to scale up or down based on the available screen space.
Common Approaches to Setting Full Page Size
One approach you may have seen is setting height: 100% on both the <html> and <body> elements, like this:
html, body {
height: 100%;
}The thinking here is that setting a height of 100% will make the page fill the full height of the browser window. And by applying this style to both elements, you can be sure it takes effect.
However, there are a couple drawbacks to this technique. First, setting height: 100% on the <body> doesn‘t do quite what you might expect. Percentage heights are calculated based on the height of the parent element. So for this to work, the <html> element needs to have a defined height. Setting height: 100% on <html> works because its parent is the browser window itself (the viewport). But the same rule doesn‘t apply to <body>.
Additionally, hard-coding a height of 100% can be problematic for pages where the content is taller than the viewport. The page won‘t be able to expand vertically to fit the content. It‘s generally better to let the page height grow with the content while setting a minimum height to fill the screen.
The Modern Solution Using Viewport Units
These days, a better approach is to use viewport-relative units (vh/vw) to size page-level elements. Specifically, setting min-height: 100vh on the <body> element will make it at least as tall as the viewport, while still allowing it to grow taller if needed.
Here‘s an example:
body {
min-height: 100vh;
}The vh unit is equivalent to 1% of the height of the viewport. So 100vh is 100% of the viewport height. By using min-height instead of height, we ensure the body will be at least full-screen height, while maintaining the ability to expand to fit the content.
According to web.dev, a 2019 analysis of the top 1,000,000 home pages found that 53% were using viewport units for page layout. This number has likely increased in the years since as support for viewport units has improved and more developers have adopted responsive design techniques.
As Google engineer Surma writes in his article "The trick to viewport units on mobile":
Viewport units are incredibly useful and an intuitive tool when developing responsive layouts. They enable you to specify sizes in CSS that are relative to the viewport size, which makes it easy to create full-screen experiences or elements that adapt to different screen sizes.
Dealing with Horizontal Scrollbar Issues
One potential gotcha to be aware of when building full-screen pages is the appearance of unwanted horizontal scrollbars. This can happen if you have an element on the page set to width: 100vw.
The vw unit is similar to vh, but is relative to the width of the viewport instead of the height. So 100vw is equal to 100% of the viewport width. The problem is that the viewport width doesn‘t account for the space taken up by a vertical scrollbar, which is usually around 15-20 pixels. So an element with width: 100vw will be slightly wider than the available space, triggering a horizontal scrollbar.
To avoid this problem, it‘s generally best to not set explicit widths on page-level elements like <html> and <body>. By default, they‘ll be 100% of the available width, minus any margins/padding. If you do need to set a width, use a percentage or a max-width instead of a fixed value.
Using a CSS Reset for Consistency
Another issue you may run into when setting page dimensions is the impact of default margins and padding. Browsers apply some default styling to elements, which can throw off your layouts if you‘re not expecting it.
For example, the <body> element has a default margin of 8 pixels on all sides. So even if you set width: 100% and height: 100% on <body>, it‘ll still be slightly smaller than the viewport due to that margin.
To eliminate these default styles, you can use a CSS reset. A reset is a set of styles that override the browser defaults, giving you a consistent starting point. Here‘s an example of a basic reset from the popular normalize.css project:
/* Remove default margin */
body {
margin: 0;
}
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}The margin: 0 rule removes the default margin on the <body>. And the box-sizing rules change the way element sizes are calculated to include borders and padding, which is generally more intuitive.
Resets like Normalize.css are used as a starting point by many developers. A 2022 analysis of 1 million websites found that 24% were using some form of CSS reset.
As Normalize.css creator Jonathan Neal explains:
Resets impose a homogenous visual style by flattening the default styling for almost all elements. In contrast, [Normalize.css] is a gentle solution that aims to preserve useful browser defaults rather than erasing them completely.
Creating Responsive Full-Page Layouts
Now that we‘ve covered the key concepts behind full-page layouts, let‘s look at some specific examples of how to create responsive designs that scale across different devices.
Full-Width Header and Footer with Centered Content
One common layout pattern is to have a full-width header and footer with a centered content area in between. This can be achieved with a combination of flexbox and viewport units.
Here‘s the HTML markup for a basic page with a header, main content area, and footer:
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Page Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet ex metus, vel sodales odio aliquet ut.</p>
</main>
<footer>
<p>© 2023 My Site</p>
</footer>
</body>And here‘s the CSS to create a full-page layout with a centered main content area:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header, footer {
background-color: #333;
color: white;
padding: 20px;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
flex: 1;
}The key styles here are:
min-height: 100vhon the<body>to make it at least full-screen heightdisplay: flexandflex-direction: columnon the<body>to stack the header, main, and footer verticallymax-width: 800pxandmargin: 0 autoon the<main>element to center it horizontally and constrain its widthflex: 1on the<main>element to make it take up all the available vertical space, pushing the footer to the bottom
This creates a responsive layout that fills the screen on any device while keeping the main content readable.
Full-Width Sections with Alternating Background Colors
Another popular layout technique is to create full-width sections with alternating background colors or images. This can be a great way to visually separate different types of content or create an engaging, immersive experience.
Here‘s an example of how you might structure your HTML for this type of layout:
<body>
<section class="hero">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="features">
<div class="container">
<h2>Features</h2>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Get Started Today</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet ex metus, vel sodales odio aliquet ut.</p>
<a href="#" class="button">Sign Up</a>
</div>
</section>
</body>And here‘s the CSS to create full-width sections with different background colors:
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.hero {
background-color: #007bff;
color: white;
}
.features {
background-color: #f8f9fa;
}
.cta {
background-color: #dc3545;
color: white;
}
.container {
max-width: 800px;
}The main styles to notice here are:
min-height: 100vhon each<section>to make them full-screen heightdisplay: flex,justify-content: center, andalign-items: centeron each<section>to center the content vertically and horizontally- Different background colors on each
<section>to create visual separation - A
.containerclass withmax-width: 800pxto constrain the content width on larger screens
This creates a series of full-width, full-height sections that fill the screen with different background colors. The content within each section is centered and constrained to a readable width.
You could extend this technique by adding background images, gradients, or even video to create more immersive, engaging sections.
Performance Considerations for Full-Page Layouts
While full-page layouts can create a great visual impact, it‘s important to consider performance when building these types of designs. Large background images, videos, and complex animations can slow down page load times and negatively impact the user experience, especially on mobile devices with slower network connections.
According to Google‘s Core Web Vitals guidelines, pages should aim to load their main content within 2.5 seconds on mobile devices. This is known as the Largest Contentful Paint (LCP) metric. Pages that take longer than 4 seconds to load their main content are considered to have a poor user experience.
To ensure your full-page layouts load quickly, follow these optimization tips:
- Compress images and videos to reduce file size
- Use responsive images to serve appropriately sized files based on screen size
- Lazy-load non-critical resources below the fold
- Minimize the use of large, complex animations
- Use CSS for styling instead of images wherever possible
- Optimize your CSS and JavaScript files by minifying and concatenating them
By keeping performance in mind as you design and build your full-page layouts, you can create engaging, immersive experiences that load quickly and look great on any device.
Conclusion
Designing full-page layouts that look great and function well across a wide range of devices can be challenging. But with a solid understanding of the differences between the <html> and <body> elements, and a few key responsive design techniques, you can create layouts that scale and adapt to any screen size.
The key takeaways are:
- Use
min-height: 100vhon the<body>element to create a minimum full-screen height while allowing the content to expand as needed - Avoid setting explicit widths on the
<html>and<body>elements to prevent unwanted horizontal scrollbars - Use a CSS reset to override default browser styles for consistent rendering
- Use flexbox and viewport units to create responsive, centered layouts
- Create visual interest with full-width sections that have alternating background colors or images
- Optimize your images, videos, and code for performance to ensure fast loading times
By following these techniques and keeping the user experience at the forefront, you can build immersive, engaging, and performant full-page layouts that delight your users and keep them coming back for more.