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:

 <div class="layout parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
        </div>
        <div class="right"><p>right</p></div>
        <div style="clear: both;">11111111111</div>
    </div>

.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

  <div class="layout parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
        </div>
        <div class="right"><p>right</p></div>
        <div style="clear: both;">11111111111</div>
    </div>

    .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

    <div class="layout parent">
        <div class="left"><p>left</p> </div>
        <div class="center">
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
        </div>
        <div class="right"><p>right</p></div>
    </div>

   .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;
}

<div class="layout parent">
    <div class="left"><p>left</p> </div>
    <div class="center">
        <p>我是中间部分的内容</p>
        <p>我是中间部分的内容</p>
        <p>我是中间部分的内容</p>
        <p>我是中间部分的内容</p>
    </div>
    <div class="right"><p>right</p></div>
</div>

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;
    }

<div class="layout parent">
    <div class="left"><p>left</p> </div>
    <div class="center">
        <p>我是中间部分的内容</p>
        <p>我是中间部分的内容</p>
        <p>我是中间部分的内容</p>
        <p>我是中间部分的内容</p>
    </div>
    <div class="right"><p>right</p></div>
</div>

Real Contour-js

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

    <div class="layout parent">
        <div class="left"><p>left</p> </div>
        <div class="center">
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
            <p>我是中间部分的内容</p>
        </div>
        <div class="right"><p>right</p></div>
    </div>

    .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!