Advertisements
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:
- How to set the height of a DIV to 100% using CSS
- How to create two DIV elements with same height side by side in CSS
- How to make a DIV not larger than its contents using CSS
Advertisements