What are the ways to implement equal height layout in css

What is equal height layout?

refers to a layout in which child elements in the same parent container have equal heights.

From the perspective of the implementation method of equal height layout, it is divided into two categories:

1. Pseudo-equal height

The height difference of sub-elements still exists, but it just visually gives people the impression that Equal height.

2. True equal height

The heights of sub-elements are equal.

Pseudo-equal height implementation:

Through negative margin and Padding

True equal-height implementation:

1, table

2, absoult

3, flex

4, grid

5, js

(recommended tutorial:CSS Getting Started Tutorial)

Pseudo-equal height - negative margin and padding

Mainly use negative margin to achieve, as follows:

 
left
 
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
 
right
 
11111111111
 

.parent{ position: relative; overflow:hidden; color: #efefef; } .center, .left, .right { box-sizing: border-box; float: left; } .center { background-color: #2ECC71; width: 60%; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; } .left, .right, .center { margin-bottom: -99999px; padding-bottom: 99999px; }

Real equal height-table layout

 
left
 
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
 
right
 
11111111111
 

.parent{ position: relative; display: table; color: #efefef; } .center, .left, .right { box-sizing: border-box; display: table-cell } .center { background-color: #2ECC71; width: 60%; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; }

True Contour-absolute

 
left
 
 
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
 
right
 

.parent{ position: absolute; color: #efefef; width:100%; height: 200px; } .left, .right, .center { position: absolute; box-sizing: border-box; top:0; bottom:0; } .center { background-color: #2ECC71; left: 200px; right: 300px; } .left { width: 200px; background-color: #1ABC9C; } .right { right:0; width: 300px; background-color: #3498DB; }

Real Contour-flex

.parent{ display: flex; color: #efefef; width:100%; height: 200px; } .left, .right, .center { box-sizing: border-box; flex: 1; } .center { background-color: #2ECC71; } .left { background-color: #1ABC9C; } .right { background-color: #3498DB; }

 
left
 
 
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
 
right
 

Real Contour-grid

.parent{ display: grid; color: #efefef; width:100%; height: 200px; grid-template-columns: 1fr 1fr 1fr; } .left, .right, .center { box-sizing: border-box; } .center { background-color: #2ECC71; } .left { background-color: #1ABC9C; } .right { background-color: #3498DB; }

 
left
 
 
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
 
right
 

Real Contour-js

Get the highest column among all elements, and then compare and modify it

 
left
 
 
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
我是中间部分的内容
 
 
right
 

.parent{ overflow: auto; color: #efefef; } .left, .right, .center { float: left; } .center { width: 60%; background-color: #2ECC71; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; }

// 获取最高元素的高度 var nodeList = document.querySelectorAll(".parent > div"); var arr = [].slice.call(nodeList,0); var maxHeight = arr.map(function(item){ return item.offsetHeight }).sort(function(a, b){ return a - b; }).pop(); arr.map(function(item){ if(item.offsetHeight < maxHeight) { item.style.height = maxHeight + "px"; } });

As shown:

## Recommended related video tutorials :

css video tutorial

The above is the detailed content of What are the ways to implement equal height layout in css. For more information, please follow other related articles on the PHP Chinese website!