You can use the Flexbox layout to make a div to fill the height of the remaining screen space.
In web development, you might need a container (like a div) that changes its height to fit the remaining space on the screen. This helps create layouts that look good on any device. Methods such as viewport height, Grid layout, and flexbox are used to make the div as full height as the remaining screen space. Let’s discuss these methods in detail in this blog.
Table of Contents:
Methods to Make a DIV to Fill the Height of the Remaining Screen Space
You can use the combination of CSS properties such as height, min-height, vh, flex, and calc() to make a DIV fill the remaining height of the screen. We will discuss these combinations below.
Method 1: Using vh (viewport height) Unit
In this method, vh represents 1% of height; therefore, using the 100vh, you can make the div take 100% of the height in screen space.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fill Remaining Space with VH</title>
<style>
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
.content {
background-color: #f1c40f;
padding: 20px;
height: calc(100vh - 120px); /* Subtract header and footer height */
}
.footer {
background-color: #2ecc71;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>Header</h1>
</header>
<div class="content">
<p>This div will fill the height using the vh unit.</p>
</div>
<footer class="footer">
<p>Footer</p>
</footer>
</div>
</body>
</html>
Output:
Explanation: To fill the remaining space after subtracting the height of the header and footer, you can use the calc(100vh – 120px) in the .content div. By this, we can know that the div gets adjusted to the available space, making it responsive.
Method 2: Using Grid Layout
You can create a complex layout using the CSS grid, and the grid area makes the remaining spaces get filled.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fill Remaining Space with Grid</title>
<style>
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto; /* auto for header/footer, 1fr for content */
height: 100%;
}
.header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
.content {
background-color: #f1c40f;
padding: 20px;
}
.footer {
background-color: #2ecc71;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>Header</h1>
</header>
<div class="content">
<p>This div will fill the remaining space using CSS Grid.</p>
</div>
<footer class="footer">
<p>Footer</p>
</footer>
</div>
</body>
</html>
Output:
Explanation: You can use the grid-template-rows: auto 1fr auto to fix the header and footer sections. The content section is used to fill the remaining space using 1fr.
Method 3: Using position: absolute and calc()
You can calculate the div’s height using the combination of position: absolute and calc() function.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fill Remaining Space with Absolute Positioning</title>
<style>
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
height: 80px;
}
.content {
position: absolute;
top: 80px; /* Height of the header */
bottom: 60px; /* Height of the footer */
width: 100%;
background-color: #f1c40f;
padding: 20px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #2ecc71;
color: white;
text-align: center;
padding: 20px;
height: 60px;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>Header</h1>
</header>
<div class="content">
<p>This div will fill the remaining space using absolute positioning.</p>
</div>
<footer class="footer">
<p>Footer</p>
</footer>
</div>
</body>
</html>
Output:
Explanation: The content div is absolutely positioned inside the container. The header and footer are set to the height of 80px and 60px to make the content div fill the remaining space. This method works well in the case of a fixed header and footer.
Method 4: Using Flexbox Layout
When the content is not enough to fill the screen, you can combine the flexbox with the min-height property to fill the remaining space.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fill Remaining Space with Flexbox and Min-Height</title>
<style>
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
.content {
background-color: #f1c40f;
padding: 20px;
min-height: 100%; /* Ensures content fills remaining space */
}
.footer {
background-color: #2ecc71;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>Header</h1>
</header>
<div class="content">
<p>This div will fill the remaining space using Flexbox and min-height.</p>
</div>
<footer class="footer">
<p>Footer</p>
</footer>
</div>
</body>
</html>
Output:
Explanation: Even if the content is little, we can fill the remaining spaces using min-height: 100% on the .content div.
Conclusion
You can use the CSS property combination to make the DIV fill the height of the remaining screen space. Properties such as height, min-height, vh, flex, and calc() are used for this purpose. Making a div fill the remaining height of the screen is useful for creating responsive web designs that look good on any device. The above-discussed methods are an efficient way to fill the remaining screen height.
How to Make a DIV to Fill the Height of the Remaining Screen Space? – FAQs
1. What CSS property is used to make a div fill the remaining height?
You can use the calc() function with the height property to make a div fill the remaining height. Example: height: calc(100vh – [height of other elements]);
2. Why is it important to fill the remaining height of the screen with a div?
It makes your layout responsive and adapts to the different screen sizes for a better experience.
3. What units are used in the calc() function?
This function combines the units like vh(viewport height) and px(pixels).
4. Can I use this method with flexbox or grid layouts?
Yes, you can combine the calc() function with flexbox and grid layout to get a more responsive layout.
5. What if I have multiple elements affecting the height?
You can add or subtract multiple values within the calc() function to account for the heights of headers, footers, and other elements.