css等高布局

一、CSS等高布局的7种方式
https://www.cnblogs.com/xiaohuochai/p/5457127.html

1、 负margin
　　因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，使背景色铺满元素区域，又符合元素的盒模型的计算公式，实现视觉上的等高效果
[注意]如果页面中使用<a>锚点跳转时，将会隐藏部分文字信息
[注意]如果页面中的背景图片定位到底部，将会看不到背景图片

<style>
body,p{margin: 0;}
.parent{
    overflow: hidden;
}
.left,.centerWrap,.right{
    float: left;
    width: 50%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.center{
    margin: 0 20px;
}
.left,.right{
    width: 25%;
}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>  
    <div class="centerWrap">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>         
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
    </div>        
</div>

2 table
　　table元素中的table-cell元素默认就是等高的

<style>
body,p{margin: 0;}
.parent{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left,.centerWrap,.right{
    display: table-cell;
}
.center{
    margin: 0 20px;
}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>  
    <div class="centerWrap">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>         
    </div> 
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
    </div>        
</div>

3 flex
　　flex中的伸缩项目默认都拉伸为父元素的高度，也实现了等高效果

<style>
body,p{margin: 0;}
.parent{
    display: flex;
}
.left,.center,.right{
    flex: 1;
}
.center{
    margin: 0 20px;
}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>  
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>          
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
    </div>        
</div>

4 grid

<style>
body,p{margin: 0;}
.parent{
    display: grid;
    grid-auto-flow: column;
    grid-gap:20px;
}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>  
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>          
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
    </div>        
</div>

5、absolute(真等高)

设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同，实现等高效果

<style>
body,p{margin: 0;}
.parent{
    position: relative;
    height: 40px;
}
.left,.center,.right{
    position: absolute;
    top: 0;
    bottom: 0;
}
.left{
    left: 0;
    width: 100px;
}
.center{
    left: 120px;
    right: 120px;
}
.right{
    width: 100px;
    right: 0;
}
</style>