CSS等高布局

一、利用盒子padding-buttom：999px和margin-buttom：-999px互相抵消，之后用overflow：hidden开启BFC裁剪多余的部分。考虑兼容性会好用一点。

    <style>
        html{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 400px;
            height: 600px;
            background-color: aquamarine;
            box-sizing: border-box;

            position: relative;
            /*主要*/
            overflow: hidden;
        }
        .box1{
            width: 200px;
            height: 600px;
            background-color: bisque;
            float: left;
        }
        .box2{
            width: 200px;
            float: left;
            background-color: brown;
            
            /*主要*/
            padding-bottom: 99999px;
            margin-bottom: -99999px;
        }
    </style>

二、Flex弹性布局实现等高，父元素启用弹性布局，设置flex-direction：row实现等高，子元素flex：1，实现等宽。

    <style>
        html{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 400px;
            height: 600px;
            background-color: aquamarine;
            box-sizing: border-box;

            display: flex;
            flex-direction: row;
        }
        .box1{
            width: 200px;
            height: 600px;
            background-color: bisque;
            float: left;
            flex: 1;
        }
        .box2{
            float: left;
            background-color: brown;
            flex: 1;
        }
    </style>

三、grid布局，父元素开启grid布局display：grid，将grid-auto-flow：culomn，子元素自动等高排列，操作简洁。

    <style>
        html{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 400px;
            height: 600px;
            background-color: aquamarine;
            box-sizing: border-box;

            display: grid;
            grid-auto-flow: column;
        }
        .box1{
            background-color: bisque;
        }
        .box2{
            background-color: brown;
        }
        .box3{
            background-color: cornflowerblue;
        }