CSS div height fills the remaining space of the parent container
CSS div height fills parent container remaining space
In web page layout, it’s often necessary to make a div element’s height fill the remaining space of its parent container. This is especially important in responsive design, as we want the page to display adaptively on different devices. This article will introduce several common methods to achieve this effect.
Method 1: Using Flexbox Layout
Flexbox layout is a powerful layout method that easily achieves adaptive layout of elements. By setting the display property of the parent container to flex, the height of the child element will automatically fill the remaining space of the parent container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox layout</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.header {
background-color: #f0f0f0;
height: 50px;
}
.content {
background-color: #e0e0e0;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
</body>
</html>
Output:
In the above example, we create a parent container with a height of 300px, a 50px header, and content with a flex property of 1. The content’s height will automatically fill the remaining space of the parent container.
Method 2: Using Grid Layout
Grid Layout is another powerful layout method that can create complex grid layouts. By setting the parent container’s display property to grid and using the grid-template-rows property to define row heights, you can make child elements fill the remaining space of the parent container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
.container {
display: grid;
grid-template-rows: 50px 1fr;
height: 300px;
}
.header {
background-color: #f0f0f0;
}
.content {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
</body>
</html>
Output:
In the above example, we create a parent container with a height of 300px, which contains a header with a height of 50px and a content with a height of 1fr. The 1fr represents the remaining space ratio, and the content height will automatically fill the remaining space of the parent container.
Method 3: Using Absolute Positioning
Another common method is to use absolute positioning to achieve the effect of a div filling the remaining space of its parent container. By setting the position property of the child element to absolute and setting the top, bottom, left, and right properties to 0, the height of the child element can be made to fill the remaining space of the parent container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute positioning</title>
<style>
.container {
position: relative;
height: 300px;
}
.header {
background-color: #f0f0f0;
height: 50px;
}
.content {
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
background-color: #e0e0e0; }
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
</body>
</html>
Output:
In the above example, we create a parent container with a height of 300px, which contains a header with a height of 50px and an absolutely positioned content. The content’s top is the height of the header and its bottom is 0, so the content’s height will automatically fill the remaining space of the parent container.
Method 4: Use the calc() Function
The calc() function is a powerful CSS3 function that performs mathematical calculations. By combining the calc() function with percentages, you can make a child element’s height fill the remaining space of its parent container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calc() function</title>
<style>
.container {
height: 300px;
}
.header {
background-color: #f0f0f0;
height: 50px;
}
.content {
background-color: #e0e0e0;
height: calc(100% - 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
</body>
</html>
Output:
In the example above, we create a parent container with a height of 300px, a header with a height of 50px, and content whose height is calculated using the calc() function. The content’s height is 100% minus the header’s height, so the content’s height automatically fills the remaining space of the parent container.
Method 5: Use the flex-grow property
The flex-grow property is a property in Flexbox layout that controls the growth ratio of a child element within its parent container. By setting the flex-grow property to 1 on a child element, the child element’s height will fill the remaining space in the parent container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-grow attribute</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.header {
background-color: #f0f0f0;
height: 50px;
}
.content {
background-color: #e0e0e0;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
</body>
</html>
Output:
In the above example, we create a parent container with a height of 300px, which contains a header with a height of 50px and content with a flex-grow property of 1. The content’s height will automatically fill the remaining space of the parent container.
Through the above methods, we can easily achieve the effect of making the div element’s height fill the remaining space of the parent container. In actual projects, you can choose the appropriate method to implement page layout according to specific needs. Below we will continue to introduce more sample code to demonstrate how to make div elements fill the remaining space of the parent container in different situations.
Sample Code 1: Fixed-Height Header and Footer, Adaptive Content in Between
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed-Height Header and Footer</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.header {
background-color: #f0f0f0;
height: 50px;
}
.content {
background-color: #e0e0e0;
flex: 1;
}
.footer {
background-color: #f0f0f0;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Output:
In this example, we create a parent container with a height of 300px, a fixed-height header and footer, and a content element with a flex property of 1. The content element’s height will automatically fill the remaining space in the parent container.
Sample Code 2: Multiple Sub-Elements Adaptive Height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Sub-Elements Adaptive Height</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 300px;
}
.header {
background-color: #f0f0f0;
height: 50px;
}
.content {
background-color: #e0e0e0;
flex: 1;
}
.sidebar {
background-color: #f0f0f0;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
</body>
</html>
Output:
In this example, we create a parent container with a height of 300px, which contains a fixed-height header and sidebar, and a content element with a flex property of 1. The content element’s height will automatically fill the remaining space within the parent container.
Through the above code examples, we can see how to use CSS to make div elements fill the remaining space within the parent container in different situations. These methods can help us achieve flexible page layouts that can adapt to different devices.