如何让一个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中文网其他相关文章！