Several common methods of CSS equal height layout

Equal height layout

Refers to the layout of child elements with equal height in the same parent container.

From the perspective of equal height layout implementation, it can be divided into two categories

Pseudo height

The height difference of the sub-elements still exists, but visually they give people the feeling of being equal in height.

True height

Sub-elements have equal height

Let's first look at the pseudo-equal height implementation method

Implemented through negative margin and padding

True equal height implementation

table
absoult
flex
grid
js

Pseudo-equal height - negative margin and padding

It is mainly implemented by negative margin. For specific negative margin implementation, please refer to the following article

 <div class="layout parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
        </div>
        <div class="right"><p>right</p></div>
        <div style="clear: both;">111111111111</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;
}

True equal height - table layout

  <div class="layout parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
        </div>
        <div class="right"><p>right</p></div>
        <div style="clear: both;">111111111111</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>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</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;
    }

True height - 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>I am the content in the middle part</p>
        <p>I am the content in the middle part</p>
        <p>I am the content in the middle part</p>
        <p>I am the content in the middle part</p>
    </div>
    <div class="right"><p>right</p></div>
</div>

True height - 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>I am the content in the middle part</p>
        <p>I am the content in the middle part</p>
        <p>I am the content in the middle part</p>
        <p>I am the content in the middle part</p>
    </div>
    <div class="right"><p>right</p></div>
</div>

True height-js

Get the highest column of all elements, then compare and modify them

    <div class="layout parent">
        <div class="left"><p>left</p> </div>
        <div class="center">
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</p>
            <p>I am the content in the middle part</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;
    }

     // Get the height of the highest element 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";
        }
    });

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Sharing an idea of building a master-slave system for a large MySQL database

>>: Introduction to Royal Blue Color Matching for Web Design