NeuroAgent

Make Div Full Browser Height: Complete CSS Guide

Learn how to make a div fill the entire browser window height using CSS. Explore viewport units, flexbox, and grid solutions for responsive layouts.

#css-grid#css-height#flexbox-layout#responsive-design#two-column-layout#viewport-units
Question

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user’s browser window. Right now, the background-color ends at the last piece of content in that div. I’ve tried height: 100%;, min-height: 100%;, etc.

NeuroAgent

To make a div 100% height of the browser window in a two-column layout, you need to use viewport units or modern CSS layout methods. The issue with height: 100% and min-height: 100% is that they only work if the parent container has a defined height, which the <body> and <html> elements typically don’t have by default.

Contents

Using Viewport Units

The simplest solution is to use viewport height units (vh). For your right div, you can set:

css
.right-div {
    height: 100vh;
    background-color: grey;
}

However, this approach has limitations:

  • The element will always be exactly the height of the viewport, even if there’s more content
  • It doesn’t work well if you want the element to expand beyond the viewport when there’s more content

For better flexibility, use min-height instead:

css
.right-div {
    min-height: 100vh;
    background-color: grey;
}

This ensures the element is at least the height of the viewport but can grow taller if there’s more content.

Flexbox Solution

Flexbox is often the best approach for two-column layouts where you want one column to fill the available space:

html
<div class="container">
    <div class="left-column">Left content</div>
    <div class="right-column">Right content</div>
</div>
css
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
}

.left-column {
    flex: 0 0 200px; /* Fixed width */
}

.right-column {
    flex: 1; /* Takes remaining space */
    background-color: grey;
}

This approach automatically makes the right column fill the remaining height and width of the container.

CSS Grid Solution

CSS Grid provides another excellent option for creating responsive layouts:

css
.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 100vh;
}

.right-column {
    background-color: grey;
}

Grid is particularly powerful because it gives you more control over both dimensions and can handle more complex layouts.

Common Issues and Fixes

Parent Container Height Issue

If height: 100% isn’t working, it’s likely because the parent containers don’t have defined heights. Make sure to set:

css
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

Overflow Content

If your right div has content that overflows, you can control it with:

css
.right-div {
    min-height: 100vh;
    overflow-y: auto; /* Adds scrollbar if content is too long */
    background-color: grey;
}

Mobile Responsiveness

For mobile devices, you might want to stack the columns:

css
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .left-column {
        flex: none;
        height: auto;
    }
    
    .right-column {
        min-height: 0;
    }
}

Complete Working Examples

Example 1: Simple Two-Column Layout

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Column Layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        .container {
            display: flex;
            height: 100vh;
        }

        .left-column {
            width: 250px;
            background-color: #f0f0f0;
            padding: 20px;
        }

        .right-column {
            flex: 1;
            background-color: grey;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">
            <h3>Navigation</h3>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>
        <div class="right-column">
            <h2>Main Content</h2>
            <p>This content will fill the available height of the browser window.</p>
        </div>
    </div>
</body>
</html>

Example 2: With Min-Height for Content-Heavy Layouts

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min Height Layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .left-column {
            width: 200px;
            background-color: #333;
            color: white;
            padding: 20px;
        }

        .right-column {
            flex: 1;
            min-height: 100vh;
            background-color: grey;
            padding: 20px;
        }

        .content-section {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">
            <h3>Menu</h3>
            <nav>
                <ul>
                    <li><a href="#">Dashboard</a></li>
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Settings</a></li>
                </ul>
            </nav>
        </div>
        <div class="right-column">
            <div class="content-section">
                <h1>Dashboard</h1>
                <p>Welcome to your dashboard. This layout will ensure the grey background extends to the full height of your browser window.</p>
                
                <!-- Add more content here to test -->
                <div style="height: 1000px; background: linear-gradient(to bottom, grey, #ccc); margin-top: 20px;">
                    <p>Scroll down to see how the grey background extends beyond the viewport</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Sources

  1. MDN Web Docs - Viewport units
  2. CSS-Tricks - Complete Guide to Flexbox
  3. W3C CSS Grid Layout
  4. Stack Overflow - Make div fill height of container

Conclusion

  • Use min-height: 100vh for simple solutions where you want the div to be at least the viewport height
  • Implement flexbox or CSS Grid for more sophisticated two-column layouts that automatically fill available space
  • Always set html, body { height: 100%; margin: 0; padding: 0; } to ensure proper height inheritance
  • Test your layout with different content amounts and screen sizes to ensure it works in all scenarios
  • Consider using overflow-y: auto on your divs to handle content that exceeds the viewport height

The flexbox approach is generally the most flexible and modern solution for two-column layouts where you need one column to fill the browser window height.

How to make a div 100% height of its parent container?What's the difference between height: 100% and min-height: 100vh in CSS?How to create a sticky footer that stays at the bottom of the page?How to handle overflow in full-height divs with lots of content?What are the best practices for responsive two-column layouts?How to make a div expand to fill remaining space in flexbox?
Ask NeuroAgent