Home >Web Front-end >CSS Tutorial >How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?
How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?
- Linda HamiltonOriginal
- 2024-11-08 08:53:02774browse
Maintaining Consistent Height Distribution with Div Elements
Ensuring a proportional height distribution among multiple div elements can be accomplished through advanced CSS techniques. Consider the following scenario:
</p> <pre class="brush:php;toolbar:false"><div>
The goal is to make div2 occupy the remaining height of the page, while allowing div1 to maintain its fixed height.
Solution: Absolute Positioning
By using the following CSS styles, you can achieve the desired behavior:
<div>
<div>
div1{
width: 100%; height: 50px; background-color:red;/*Development Only*/
}
div2{
width: 100%; position: absolute; top: 50px; bottom: 0; background-color:blue;/*Development Only*/
}
<div>
Explanation
By applying absolute positioning to div2, it is removed from the normal flow of the page and instead positioned based on the specified top and bottom values. The top property sets the distance from the top edge of div1, while the bottom property ensures that the element extends to the bottom of the page. The width of div2 is set to 100% to span the entire width of the page.
This technique allows you to dynamically adjust the height of div2 based on the height of div1 and the overall page height, ensuring a consistent and responsive layout.
The above is the detailed content of How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?. For more information, please follow other related articles on the PHP Chinese website!