极客教程CSS div高度填满父容器剩余空间
在网页布局中，经常会遇到需要让一个div元素的高度填满其父容器剩余空间的情况。这在响应式设计中尤为重要，因为我们希望页面在不同设备上都能够自适应显示。本文将介绍几种常见的方法来实现这一效果。
方法一：使用Flexbox布局
Flexbox布局是一种强大的布局方式，可以轻松实现元素的自适应布局。通过设置父容器的display属性为flex，子元素的高度将会自动填满父容器的剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox布局</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:
在上面的示例中，我们创建了一个高度为300px的父容器，其中包含一个高度为50px的header和一个flex属性为1的content。content的高度将会自动填满父容器的剩余空间。
方法二：使用Grid布局
Grid布局是另一种强大的布局方式，可以实现复杂的网格布局。通过设置父容器的display属性为grid，并使用grid-template-rows属性来定义行高，可以让子元素的高度填满父容器的剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局</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:
在上面的示例中，我们创建了一个高度为300px的父容器，其中包含一个高度为50px的header和一个1fr的content。1fr表示剩余空间的比例，content的高度将会自动填满父容器的剩余空间。
方法三：使用绝对定位
另一种常见的方法是使用绝对定位来实现div填满父容器剩余空间的效果。通过设置子元素的position属性为absolute，并设置top、bottom、left、right属性为0，可以让子元素的高度填满父容器的剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</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:
在上面的示例中，我们创建了一个高度为300px的父容器，其中包含一个高度为50px的header和一个绝对定位的content。content的top为header的高度，bottom为0，这样content的高度将会自动填满父容器的剩余空间。
方法四：使用calc()函数
calc()函数是CSS3中的一个强大的函数，可以进行数学计算。通过结合calc()函数和百分比单位，可以实现让子元素的高度填满父容器的剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calc()函数</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:
在上面的示例中，我们创建了一个高度为300px的父容器，其中包含一个高度为50px的header和一个使用calc()函数计算高度的content。content的高度为100%减去header的高度，这样content的高度将会自动填满父容器的剩余空间。
方法五：使用flex-grow属性
flex-grow属性是Flexbox布局中的一个属性，可以控制子元素在父容器中的增长比例。通过设置子元素的flex-grow属性为1，可以让子元素的高度填满父容器的剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-grow属性</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:
在上面的示例中，我们创建了一个高度为300px的父容器，其中包含一个高度为50px的header和一个flex-grow属性为1的content。content的高度将会自动填满父容器的剩余空间。
通过以上几种方法，我们可以轻松实现让div元素的高度填满父容器剩余空间的效果。在实际项目中，可以根据具体需求选择合适的方法来实现页面布局。下面我们将继续介绍更多的示例代码来演示不同情况下如何让div元素填满父容器的剩余空间。
示例代码一：固定高度header和footer，中间内容自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定高度header和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:
在这个示例中，我们创建了一个高度为300px的父容器，其中包含一个固定高度的header和footer，以及一个flex属性为1的content。content的高度将会自动填满父容器的剩余空间。
示例代码二：多个子元素自适应高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个子元素自适应高度</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:
在这个示例中，我们创建了一个高度为300px的父容器，其中包含一个固定高度的header和sidebar，以及一个flex属性为1的content。content的高度将会自动填满父容器的剩余空间。
通过以上示例代码，我们可以看到不同情况下如何使用CSS来让div元素的高度填满父容器的剩余空间。这些方法可以帮助我们实现灵活的页面布局，让页面在不同设备上都能够自适应显示。