css实现侧边栏高度与container自动相等(个人笔记)

原文链接：https://www.jianshu.com/p/a2551861e6c2

这个布局的好处在于不管中间内容怎么撑高，两边侧栏都会跟着等高。

       <style>
            body{margin: 0;padding: 0;}
            .wrap{
                overflow: hidden;
            }
            .left{
                width: 200px;
                background-color: #C5C5C5;
                float: left;
                margin-bottom: -3000px; /*主要是这里,两个值要足够的大，大于内容高度*/
                padding-bottom: 3000px;
            }
            .right{
                width: 300px;
                background-color: yellow;
                float: right;
                margin-bottom: -3000px;
                padding-bottom: 3000px;
            }
            .main{
                height: 500px;
                background-color: lightpink;
                margin: 0 310px 0 210px ;
            }
        </style>

父标签的overflow:hidden属性是必须的，否则会显示溢出的内容。

<div class="wrap">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="main">内容部分</div>
</div>