How to Make a Div Occupy the Remaining Height of a Page in HTML and CSS?

How to Make Div Occupy Remaining Height in HTML and CSS

In HTML, it can be a common challenge to achieve a specific layout where one div needs to occupy the remaining height of the page. Consider a situation with two divs:

<div>
<p>The goal is to make #div2 fill the remaining height of the page. Here's a solution using absolute positioning:</p>
<pre class="brush:php;toolbar:false">#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 is given a fixed height of 50px, while #div2 is positioned absolutely and made to occupy the remaining space. The top property is set to 50px, which is the height of #div1. The bottom property is set to 0, indicating that #div2 should be anchored to the bottom of its parent, which is the page itself in this case. By doing so, #div2 will dynamically stretch to take up the remaining height of the page.