How to create full page layout html

HtmlHow-ToBeginner · 4 min read

How to Create a Full Page Layout in HTML Easily

To create a full page layout in HTML, use a container element like div set to 100% width and 100vh height with CSS. Use html and body set to 100% height and remove default margins to fill the entire browser window.

📐

Syntax

Use a basic HTML structure with html and body set to full height. Then add a container element with CSS styles to fill the page.

html, body { height: 100%; margin: 0; } removes default spacing and sets full height.
.container { width: 100%; height: 100vh; } makes the container fill the viewport height and full width.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Page Layout Syntax</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .container {
      width: 100%;
      height: 100vh;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Content here fills full page -->
  </div>
</body>
</html>

Output

A full browser window filled with a light blue background.

💻

Example

This example shows a full page layout with a header, main content area, and footer. The layout fills the entire browser window using CSS Flexbox for easy vertical arrangement.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Page Layout Example</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header, footer {
      background-color: #333;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    main {
      flex: 1;
      background-color: #f0f0f0;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <header>Header Section</header>
  <main>Main Content fills remaining space</main>
  <footer>Footer Section</footer>
</body>
</html>

Output

A full browser window with a dark header bar at top, light gray main area filling the middle, and dark footer bar at bottom.

⚠️

Common Pitfalls

Common mistakes when creating full page layouts include:

Not setting html and body height to 100%, causing the container not to fill the page.
Leaving default margins on body, which creates unwanted space around the layout.
Using fixed heights instead of viewport units like 100vh, which breaks responsiveness.

Always reset margins and use flexible height units for full page layouts.

html

<!-- Wrong way: missing height and margin reset -->
<html>
<body>
  <div style="width:100%; height:100%; background:yellow;">Content</div>
</body>
</html>

<!-- Right way: set height and remove margin -->
<html>
<head><style>html, body {height:100%; margin:0;}</style></head>
<body>
  <div style="width:100%; height:100vh; background:yellow;">Content</div>
</body>
</html>

📊

Quick Reference

Tips for full page layout:

Set html, body { height: 100%; margin: 0; } to remove default spacing and allow full height.
Use height: 100vh; on containers to fill viewport height.
Use CSS Flexbox or Grid for flexible vertical layouts.
Test in different browsers and resize window to check responsiveness.

✅

Key Takeaways

Always set html and body height to 100% and remove default margins for full page layouts.

Use viewport height units (100vh) to make containers fill the visible browser window height.

CSS Flexbox helps arrange header, content, and footer vertically to fill the page.

Avoid fixed pixel heights to keep layouts responsive on different screen sizes.

Test your layout by resizing the browser to ensure it fills the page correctly.