How to make the main content div fill the height of the screen with CSS?
Let’s see one example, the webpage has divided into 3 parts:- A header, mainbody, and footer. We want the mainbody to fill 100% of the page (fill 100% in between footer and header).
Here is code Stretch div using bottom & top to fill remaining space between elements.
<html>
<head>
<style type="text/css">
#head1 {
height: 40px;
width: 100%;
background-color: blue;
}
#foot1 {
height: 40px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0;
}
#maincontent {
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
</style>
</head>
<body>
<header id="head1"> Header </header>
<div id="maincontent">
</div>
<footer id="foot1"> Footer </footer>
</body>
</html>
Output:
![div fill height of screen with CSS](https://i0.wp.com/tutorial.eyehunts.com//wp-content/uploads/2020/11/div-fill-height-of-screen-with-CSS.png?resize=550%2C274&ssl=1)
div fill height
How to make a div take the remaining height?
Let’s assume you fixed the height and element on the top and remains bottom want to fill with div.
![div fill height](https://i0.wp.com/tutorial.eyehunts.com//wp-content/uploads/2020/11/div-fill-height.png?resize=933%2C418&ssl=1)
You can do it by using flex or Absolute Positioning or Tables or CSS3 calc.
Using Flex
<html>
<head>
<style type="text/css">
#outer {
display: flex;
flex-flow: column;
height: 100%;
}
#inner_fixed {
height: 100px;
background-color: grey;
}
#inner_remaining {
background-color: #DDDDDD;
flex-grow : 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner_fixed">
Fixed Height
</div>
<div id="inner_remaining">
Remaining Space
</div>
</div>
</body>
</html>
Absolute Positioning
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#inner_fixed {
height: 100px;
background-color: grey;
}
#inner_remaining {
background-color: #DDDDDD;
position: absolute;
top: 100px;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="inner_fixed">
Fixed height
</div>
<div id="inner_remaining">
Remaining height
</div>
</body>
</html>
Tables (or rather display: table)
<html>
<head>
<style type="text/css">
html, body, #outer {
height: 100%;
width: 100%;
margin: 0;
}
#outer {
display: table;
}
#inner_fixed {
height: 100px;
background-color: grey;
display: table-row;
}
#inner_remaining {
background-color: #DDDDDD;
display: table-row;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner_fixed">
Fixed Height
</div>
<div id="inner_remaining">
Remaining Space
</div>
</div>
</body>
</html>
Child div fill parent height
Force child div to be 100% of parent div’s height without specifying parent’s height example code:-
<html>
<head>
<style type="text/css">
.parent {
background: red;
padding: 10px;
display:flex;
}
.other-child {
width: 100px;
background: yellow;
height: 150px;
padding: .5rem;
}
.child {
width: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="other-child">
Only used for stretching the parent
</div>
<div class="child"></div>
</div>
</div>
</body>
</html>
Output:
![Child div fill parent height](https://i0.wp.com/tutorial.eyehunts.com//wp-content/uploads/2020/11/Child-div-fill-parent-height.png?resize=576%2C449&ssl=1)
Do comment if you know another way to do it or have doubts on this tutorial.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version