css自适应布局

左侧固定，右侧自适应

<!--flex和box是两种不同的自适应布局方式，功能类似，但写法不同，flex的兼容性更高
    以下布局优先使用box布局（不兼容时使用flex）display:flex放在最后
-->

<div class="all">
    <div class="left">
        aaa
    </div>
    <div class="right">
            <div class="right_a">
                ccc
            </div>
        <div class="right_all">
            <div class="right_d">
                ddd
            </div>
        </div>
    </div>
</div>

<style>
    html,body{
        height: 100%;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .all{
        background-color: red;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-box-pack: center;
    }
    /*.left{*/
        /*flex: 1;*/
    /*}*/
    .right{
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        background-color: #0bbcbf;
        position: relative;
    }
    .right_all{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        -ms-flex-align: center;
        -ms-flex-pack: center;
    }
    .right_a{
        background-color: #0000cc;
        text-align: center;
    }
    .right_d{
        height: 3rem;
        background-color: #1dc578;
        width: 1200px;
        text-align: center;
    }
</style>