CSS sets two divs to the same height

In web page layout, we often encounter situations where we need to set the height of two div elements to the same. This situation might arise when you need to align two columns of content, or to make the page more aesthetically pleasing. To achieve this, we can easily use CSS.

Method 1: Flex Layout

Flex layout is a modern layout method that easily implements various layout requirements, including setting multiple elements to the same height. Here’s sample code using Flex layout to make two divs the same height:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
display: flex; 
} 

.item { 
flex: 1;
background-color: lightblue;
border: 1px solid black;
}
</style>

</head>

<body>

<div class="container">
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>

<div class="item">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

</div>

</div>

</body>

</html>

In the code above, we use Flex layout to wrap two div elements in a container and add the .item class to each div element. By setting the flex property of .item to 1, the two div elements share the container’s space equally, making them the same height.

Method 2: Table Layout

In addition to using Flex layout, we can also use Table layout to achieve the effect of two divs having the same height. While Table layout is not as flexible as Flex layout, it can still be useful in certain situations. Below is example code for using Table layout to achieve two divs of the same height:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
display: table; 
width: 100%; 
} 

.item { 
display: table-cell; 
background-color: lightblue; 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div> 
<div class="item"> 
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>
</div>

</body>

</html>

In the code above, we set the display property of the container wrapping the two div elements to table, and set the display property of each div element to table-cell. This makes the two div elements the same height, and they automatically adjust their height based on their content.

Method 3: Equal-Height Column Layout

Equal-height column layout is another common method that achieves overall layout alignment by setting multiple elements to the same height. Here’s sample code for using equal-height column layout to make two divs the same height:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
display: flex; 
} 

.item { 
background-color: lightblue; 
border: 1px solid black; 
} 

.item + .item { 
margin-left: 10px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div> 
<div class="item"> 
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

</body>

</html>

In the above code, we use Flex layout to wrap two div elements in a container and set the .item + .item selector to create spacing between the two div elements. This easily achieves the effect of making the two div elements the same height.

Using the above three methods, we can easily achieve a layout where two div elements have the same height. Which method to use depends on the specific situation. Flexibly using different layout methods can make the page layout more flexible and beautiful.