div2{

首頁

web前端

css教學

如何讓一個div元素佔據剩餘頁面高度，同時保持另一個div的固定高度？

Linda Hamilton

Nov 08, 2024 am 08:53 AM

How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?

與 Div 元素保持一致的高度分佈

透過先進的 CSS 技術可以確保多個 div 元素之間的比例高度分佈。考慮以下場景：

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

登入後複製</div></div>

目標是讓div2佔據頁面的剩餘高度，同時讓div1保持其固定

解決方案：絕對定位

透過使用以下CSS 樣式，您可以實現所需的行為：

登入後複製</div></div>

div1{

width: 100%;
height: 50px;
background-color:red;/*Development Only*/

登入後複製</div></div>

}

div2{

width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/

登入後複製</div></div>

<}< /pre>
<公關e><div>

</div>

登入後複製</div></div>

說明

作者

說明

作者說明作者說明作者說明作者對div2 套用絕對定位，它會從頁面的正常流程中刪除，而是根據指定的頂部和底部值進行定位。 top屬性設定距div1上邊緣的距離，而bottom屬性確保元素延伸到頁面底部。 div2的寬度設定為100%，跨越頁面的整個寬度。這個技巧可以讓你依照div1的高度和頁面整體高度動態調整div2的高度，保證一致和響應式佈局。

以上是如何讓一個div元素佔據剩餘頁面高度，同時保持另一個div的固定高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn