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
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.
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:
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