如何讓一個DIV元素佔據另一個DIV之後的剩餘頁面高度？

用DIV 元素佔用剩餘頁面高度

在Web 開發中，經常需要有一個自動調整高度來填充頁面的元素頁面上的剩餘空間。在本例中，問題涉及使第二個 DIV (#div2) 佔據第一個 DIV (#div1) 後的剩餘高度。

為了實現此目的，採用了CSS 絕對定位：

#div1 {
    width: 100%;
    height: 50px;
    background-color: red; /* For development reference only */
}
#div2 {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color: blue; /* For development reference only */
}

使用絕對定位，#div2 將從頁面的正常流程中刪除，其位置是相對於其最近的定位祖先(#div1) 確定的。

• top： 50px: 指定 #div1 頂部和 #div2 之間的距離。
• bottom: 0: 確保#div2 垂直擴展以填充剩餘空間到底部

這種方法允許#div2 根據頁面的高度動態調整其高度，確保它佔據#div1 下面的整個剩餘空間。

以上是如何讓一個DIV元素佔據另一個DIV之後的剩餘頁面高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！