有一個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;
width:100%;
height:800px;
display:flex;
flex-direction: column;
}
.childDiv1{
background-color: blanchedalmond;
width:100%;
height: 200px;
}
.childDiv2{
background-color: #0f8bcb;
width: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;
width:100%;
height:800px;
position:relative;
}
.childDiv1{
background-color: blanchedalmond;
width: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;
width:100%;
height:800px;
}
.childDiv1{
background-color: blanchedalmond;
width: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;
width:100%;
height:800px;
}
.childDiv1{
background-color: blanchedalmond;
width:100%;
height: 200px;
}
.childDiv2{
background-color: #0f8bcb;
width: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