我有一個場景，當底部用“底部”css 重新定位時，我希望頂部 div 占據 ramaining 空間。
div#container {
display: flex;
flex-direction: column;
border: 2px solid green;
width: 100%;
height: 200px;
}
div#body {
position: static;
border: 2px solid red;
flex: 1;
}
div#footer {
position: relative;
border: 2px solid blue;
height: 50px;
bottom: -15px;
}<div id="container">
<div id="body">Body content</div>
<div id="footer">footer</div>
</div>我有一個代碼筆來說明這個問題： https ://codepen.io/ydubey/pen/MWrWpNp
我希望身體（用紅色邊框標記）生長并占據腳留下的空間（用藍色邊框標記）。
提前致謝 ：）
uj5u.com熱心網友回復：
使用margin而不是標準bottom值。使用#bodyset at ，如果您使用on 值100%，瀏覽器將無法區分 flex-grow 。bottom#footer
html,
body {
height: 100%;
}
div#container {
display: flex;
flex-direction: column;
border: 2px solid green;
width: 100%;
height: 200px;
}
div#body {
position: static;
border: 2px solid red;
flex: 1;
height: 100%;
}
div#footer {
border: 2px solid blue;
height: 50px;
position: relative;
margin-bottom: -15px;
}<div id="container">
<div id="body">Body content</div>
<div id="footer">footer</div>
</div>uj5u.com熱心網友回復：
您可以使用 CSS calc() 實作您正在尋找的內容。
這是我重構您的代碼的方法，希望對您有所幫助！
div#container {
display: flex;
flex-direction: column;
border: 2px solid green;
height: 200px;
}
div#body {
position: static;
border: 2px solid red;
height: calc(100% - 50px); /* Subtracting the footer height to the body */
}
div#footer {
position: relative;
border: 2px solid blue;
height: 50px;
}<div id="container">
<div id="body">Body content</div>
<div id="footer">footer</div>
</div>uj5u.com熱心網友回復：
我不確定我是否正確理解了您，但請嘗試一下。
div#container {
display: flex;
flex-direction: column;
border: 2px solid green;
width: 100%;
height: 200px;
}
div#body {
position: static;
border: 2px solid red;
height: 100%;
}
div#footer {
position: relative;
border: 2px solid blue;
height: 50px;
bottom: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/442035.html