我有三個水平排列的 div，我希望底部 div 占據螢屏底部。事實上，最底部的 div 不會這樣做 - 底部有空格。我如何獲得它以便只顯示三個 div？
<div id="the whole thing" style="height:100%; width:100%">
<div id="toprow" style="position: relative; width:100%; height:150px; background-color:red;color:white">
First row
</div>
<div id="secondrow" style="position: relative; width:100%; height: 300px;background-color:black;color:white">
Second row
</div>
<div id="thirdrow" style="position: relative; width:100%; height:100%;background-color:blue;color:white">
Third row
</div>
</div>
uj5u.com熱心網友回復：
嘗試使用display: flex.
你可以試試這個：
<style>
#thewholething{
display: flex;
flex-direction: column;
}
#thirdrow{
flex-grow: 1;
align-self: stretch;
}
</style>
和 HTML：
<div id="thewholething" style="height:600px; width:100%">
<div id="toprow" style="width:100%; height:150px; background-color:red;color:white">
First row
</div>
<div id="secondrow" style="width:100%; height: 300px;background-color:black;color:white">
Second row
</div>
<div id="thirdrow" style="width:100%; background-color:blue;color:white">
Third row
</div>
</div>
嘗試使用父 DIV 或其他 DIV 的整體高度，看看神奇！
編輯：你可以不試試這個align-self: stretch;，它也能用！
uj5u.com熱心網友回復：
這不是最好的解決方案，但它可以在這里作業，并且按照您的建議，最好使用 flexbox
我只將高度更改為 100vh 以獲取網頁的整個高度，但 100% 不會占用整個頁面，因為父級沒有特定的高度，因此需要它也需要嘗試查看所有內容如何協同作業在 CSS 中
<div id="the whole thing" style="height:100vh; width:100%">
<div id="toprow" style="position: relative; width:100%; height:150px; background-color:red;color:white">
First row
</div>
<div id="secondrow" style="position: relative; width:100%; height: 300px;background-color:black;color:white">
Second row
</div>
<div id="thirdrow" style="position: relative; width:100%; height:100%;background-color:blue;color:white">
Third row
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/366393.html
上一篇：始終在視圖中保持水平表格滾動條