不好意思 又有問題
請問我有幾個div
page_content高度1000
想要裡面的第三個div隨前面兩個div做調整
像是第一個div 100
第二個div 200
第三個就是1000 - 100 - 200
<div class='page_content'>
<div>
</div>
<div>
</div>
<div >
</div>
</div>
已邀請的邦友 {{ invite_list.length }}/5
運用flex-grow就可以達到你要的
以下是原理跟我寫的範例
只對第三個div設置 flex-grow
，它就會分配到全部的剩餘空間。
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
.page_content {
display: flex;
flex-flow: column nowrap;
width: 800px;
height: 1000px;
}
.page_content :nth-child(1) {
background-color: #f00;
height: 100px;
}
.page_content :nth-child(2) {
background-color: #090;
height: 200px;
}
.page_content :nth-child(3) {
background-color: #00f;
flex-grow: 1;
}
</style>
</head>
<body>
<div class='page_content'>
<div>
我是第一個div
</div>
<div>
我是第二個div
</div>
<div>
我是第三個div
</div>
</div>
</body>
</html>
iThome鐵人賽
看影片追技術