How to Make a DIV Element Occupy the Remaining Page Height After Another DIV?

Occupying Remaining Page Height with DIV Elements

In web development, it's often necessary to have an element that automatically adjusts its height to fill the remaining space on the page. In this case, the question involves making the second DIV (#div2) occupy the remaining height after accounting for the first DIV (#div1).

To achieve this, CSS absolute positioning is employed:

#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 */
}

With absolute positioning, #div2 is removed from the normal flow of the page and its position is determined relative to its nearest positioned ancestor (#div1).

• top: 50px: Specifies the distance between the top of #div1 and #div2.
• bottom: 0: Ensures that #div2 expands vertically to fill the remaining space to the bottom of the page.

This approach allows #div2 to dynamically adjust its height based on the page's height, ensuring that it occupies the entire remaining space below #div1.

The above is the detailed content of How to Make a DIV Element Occupy the Remaining Page Height After Another DIV?. For more information, please follow other related articles on the PHP Chinese website!