有一个div中包含两个div，一个固定高度，另一个填满剩余高度

花铛 2019-06-11 14:28:25 1973 收藏 3
分类专栏： CSS 文章标签： CSS
版权
<div class="parentDiv">
<div class="childDiv1"></div>
<div class="childDiv2"></div>
</div>
1
2
3
4
flex弹性布局：
.parentDiv{
border:1px solid black;
100%;
height:800px;
display:flex;
flex-direction: column;
}
.childDiv1{
background-color: blanchedalmond;
100%;
height: 200px;
}
.childDiv2{
background-color: #0f8bcb;
100%;
flex:1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
定位：
.parentDiv{
border:1px solid black;
100%;
height:800px;
position:relative;
}
.childDiv1{
background-color: blanchedalmond;
100%;
height: 200px;
}
.childDiv2{
background-color: #0f8bcb;
position:absolute;
top:200px;
left:0;
right:0;
bottom:0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CSS3calc()函数：
calc() 函数用于动态计算长度值。
任何长度值都可以使用calc()函数进行计算；运算符前后都需要保留一个空格；calc()函数支持 “+” , " - " , " * " , " / " 运算；

.parentDiv{
border:1px solid black;
100%;
height:800px;
}
.childDiv1{
background-color: blanchedalmond;
100%;
height: 200px;
}
.childDiv2{
background-color: #0f8bcb;
calc(100% - 200px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
js
.parentDiv{
border:1px solid black;
100%;
height:800px;
}
.childDiv1{
background-color: blanchedalmond;
100%;
height: 200px;
}
.childDiv2{
background-color: #0f8bcb;
100%;
}

var parentDivH=$(".parentDiv").height();
var childDiv1H=$(".childDiv1").height();
$(".childDiv2").css("height",parentDivH-childDiv1H);
————————————————
版权声明：本文为CSDN博主「花铛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wsln_123456/java/article/details/91434096