CSS Two div elements in the lower element height adaptive adjustment with the browser window

In this article, we will introduce how to use CSS to achieve two div The height of the underlying elements in the element adjusts to the browser window.

Read more: CSS Tutorial

Using Flexbox Layout in CSS

Flexbox is a powerful layout model provided by CSS3 Tutorial that allows us to easily create flexible layouts. In this layout model, we can set the properties of the flex container to make the height of the lower elements in the two div elements adaptively adjust with the browser window.

First, we need to set the display to flex on the parent element, which will set it to a flex container. We can then use the flex-direction property to specify the direction in which the child elements should flow. In this example, we’ll set it to flow vertically, from top to bottom.

Next, we’ll set the height of the lower element to 100% so that it automatically takes up the remaining space. We can use the flex property to control the height of the upper element, adjusting it as needed.

Here’s a simple example:

<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}

.top {
flex: 1;
background-color: #f3f3f3;
}

.bottom {
height: 100%;
background-color: #ccc;
}

</style>

<div class="container">
<div class="top">
<!-- Contents of the parent element -->

</div>
<div class="bottom">
<!-- Contents of the parent element -->
</div> 
</div> 

In the example above, the container class specifies a flex container and sets its height to a percentage of the browser window height (100vh). The .top and .bottom classes represent the top and bottom elements, respectively.

Within the .top class, we use flex: 1 to set the top element’s height to automatically take up the remaining space. In the bottom element’s class, we set its height to 100%, causing it to take up the remaining space.

This way, the bottom element’s height automatically adjusts regardless of the browser window height.

Using Absolute Positioning

In addition to using Flexbox layout, we can also use absolute positioning to achieve adaptive height adjustment of underlying elements.

In this method, we use absolute positioning on the child element, positioning it relative to its parent. We then use the top and bottom properties to control its position, and adjust the value of the bottom property to automatically adjust the child element’s height.

Here’s an example:

<style> 
.container { 
position: relative; 
height: 100vh; 
background-color: #f3f3f3; 
} 

.bottom { 
position: absolute; 
top: 0; 
bottom: 0; 
width: 100%; 
background-color: #ccc; 
} 
</style> 

<div class="container"> 
<!-- Content of parent element --> 
<div class="bottom"> 
<!-- Content of child element --> 
</div> 
</div> 

In the example above, the .container class represents the parent element, and we use position: relative We then use absolute positioning ( position: absolute ) on the child element’s class .bottom and set both top and bottom to a value of 0. This positions the child element relative to the parent element’s top and bottom, and its height automatically adjusts to fit the remaining space.

Summary

This article introduced two methods for using CSS to make the height of the lower element of two div elements adapt to the browser window. This effect can be easily achieved using Flexbox layout or absolute positioning. Regardless of the method used, you can choose the method that best suits your needs to achieve adaptive layout. I hope this article is helpful!