How to make div full height of screen in css

CssHow-ToBeginner · 3 min read

How to Make a Div Full Height of Screen in CSS

To make a div full height of the screen in CSS, set its height to 100vh. The vh unit means viewport height, so height: 100vh; makes the div fill the entire visible screen height.

📐

Syntax

Use the CSS property height with the value 100vh to make an element fill the full height of the viewport (the visible screen area).

height: sets the height of the element.
100vh: means 100% of the viewport height.

css

div {
  height: 100vh;
}

💻

Example

This example shows a div that fills the entire screen height with a background color. Resize the browser window to see it always cover full height.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Height Div Example</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .full-height {
      height: 100vh;
      background-color: #4CAF50;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
    }
  </style>
</head>
<body>
  <div class="full-height">
    This div is full height of the screen
  </div>
</body>
</html>

Output

A green rectangle filling the entire browser window height with white centered text: "This div is full height of the screen"

⚠️

Common Pitfalls

Sometimes setting height: 100% on a div does not work as expected because its parent elements do not have a defined height. Using 100vh avoids this problem by referencing the viewport height directly.

Also, avoid using min-height: 100vh; if you want the div to never be shorter than the screen but allow it to grow taller if content overflows.

css

/* Wrong approach - parent has no height set */
.parent {
  /* no height set */
}
.child {
  height: 100%; /* won't fill screen height */
}

/* Correct approach using viewport height */
.child {
  height: 100vh; /* fills full screen height */
}

📊

Quick Reference

Use height: 100vh; to fill full screen height.
vh units are relative to viewport height.
Ensure margin and padding on body and html are zero to avoid scrollbars.
Use Flexbox or Grid for centering content inside the full-height div.

✅

Key Takeaways

Use height: 100vh to make a div fill the full height of the screen.

100vh means 100% of the viewport height, independent of parent elements.

Set body and html margin and padding to zero to avoid unwanted scroll.

Avoid height: 100% unless parent elements have defined heights.

Use Flexbox to center content inside a full-height div easily.