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:
Example
Try this code »<!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:
