How to make a div occupy the remaining height of the page?

Achieving Optimal Div Height Occupation

When working with web layouts, it's often necessary to have a div occupy the remaining height of the page. Take the following case: two divs, one with a fixed height, and the other intended to fill the remaining space.

<div>

To ensure that div2 occupies the remaining height of the page, an effective solution is to employ absolute positioning:

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

With this approach, div1 maintains its fixed height, while div2 is positioned absolutely, starting from the bottom of div1 and occupying the remaining vertical space until the bottom of the page, effectively filling the remaining height.

The above is the detailed content of How to make a div occupy the remaining height of the page?. For more information, please follow other related articles on the PHP Chinese website!