WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Make a DIV to Fill the Height of the Remaining Screen Space

Topic: HTML / CSSPrev|Next

Answer: Use the CSS3 flexbox Layout

You can simply use the CSS3 flexbox layout to make a <div> to fill or cover the height of the remaining screen space. CSS3 flexbox is supported in all major modern browsers.

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Make a DIV Fill the Height of the Remaining Screen Space</title>
<style>
    html, body{
        height: 100%;
        margin: 0;
    }
    .flex-container{
        display: flex;
        flex-flow: column;
        height: 100%;
    }
    .flex-container .header{
        flex: 0 1 auto;
        background: #7e8aa0;
    }
    .flex-container .content{
        flex: 1 1 auto;
        background: #dbdfe7;
    }
    .flex-container .footer{
        flex: 0 1 100px;
        background: #7e8aa0;
    }
</style>
</head>
<body>
    <div class="flex-container">
        <div class="header">
            <p><strong>Header</strong> (auto height)</p>
        </div>
        <div class="content">
            <p><strong>Content</strong> (fills remaining space)</p>
        </div>
        <div class="footer">
            <p><strong>Footer</strong> (fixed height)</p>
        </div>
    </div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties