How to Make a Div Element Occupy the Remaining Height of a Page?

Occupying Remaining Height for Div Elements

In web design, you may encounter situations where you need to make a div element take up the remaining height of the page. Consider this scenario: you have two divs with the following code:

<div>

How do you make div2 occupy the remaining height of the page?

Solution: Absolute Positioning

To achieve this, you can utilize absolute positioning with the following CSS:

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

In this code:

• Div1 has a fixed height of 50px and spans the full width of the page.
• Div2 is positioned absolutely with its top margin set to 50px (the height of div1) and its bottom margin set to 0, causing it to occupy the remaining height.

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