100%;
}
.container {
position: relative;
height: 100%;
}
.header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
.content {
background-color: #f1c40f;
position: absolute;
top: 80px; /* height of header */
bottom: 40px; /* height of footer */
left: 0;
right: 0;
}
.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 occupy the remaining height using absolute positioning.</p>
</div>
<footer class=”footer”>
<p>Footer</p>
</footer>
</div>
</body>
</html>
Output:
Explanation: By implementing position: absolute in the .content div, it allows for dynamic height adjustments according to the heights of the header and footer, ensuring the section occupies the available space efficiently.
Method 4: Using Flexbox Layout
Utilizing the Flexbox model is an excellent strategy for creating layouts where a div can adapt and occupy the remaining height of the screen.
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</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;
flex-grow: 1; /* This allows the content to grow and fill remaining space */
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 expand to fill the leftover space using Flexbox.</p>
</div>
<footer class="footer">
<p>Footer</p>
</footer>
</div>
</body>
</html>Output:
Explanation: By setting flex-grow: 1 in the .content div, it enables the content area to occupy any remaining space available, adjusting its size dynamically based on the height of the header and footer elements.
Conclusion
In summary, several techniques can be implemented to ensure a div occupies the remaining height of the screen, such as using vh units, Grid layout, position absolute with calc(), and leveraging the Flexbox model. Choose the method that best aligns with your layout requirements and design preferences.
“`html
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 division will occupy the remaining area via absolute positioning.</p>
</div>
<footer class=”footer”>
<p>Footer</p>
</footer>
</div>
</body>
</html>
Output:
Explanation: The content section is placed absolutely within the container. The header and footer have fixed heights of 80px and 60px, allowing the content area to utilize the available space. This approach is effective when a static header and footer are implemented.
Method 4: Employing Flexbox Layout
When there isn’t enough content to completely fill the screen, you can integrate flexbox with the min-height property to occupy the leftover 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>
/* Resetting 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%; /* Guarantees content occupies 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 division will utilize the remaining area with Flexbox and min-height.</p>
</div>
<footer class="footer">
<p>Footer</p>
</footer>
</div>
</body>
</html>Output:
Explanation: Even when the content is minimal, we can fill the remaining areas by using min-height: 100% on the .content section.
Conclusion
You can apply a combination of CSS properties to ensure the DIV occupies the height of the remaining screen space. Attributes such as height, min-height, vh, flex, and calc() are utilized for this objective. Making a div stretch to occupy the remaining height of the screen is beneficial for crafting responsive web designs that function well across various devices. The methods discussed above are effective strategies for filling the remaining screen height.
How to Make a DIV to Fill the Height of the Remaining Screen Space? – FAQs
The article How to Make a DIV to Fill the Height of the Remaining Screen Space? first appeared on Intellipaat Blog.
“`