하나의div를 실현하고 왼쪽의div 너비 200px를 고정하며 오른쪽의div 자체 적응

하나의div를 실현하고 왼쪽의div 너비 200px를 고정하며 오른쪽의div 자체 적응

<div class= "container">
    <div class="left">div>
    <div class="right">div>
div>

<style>
/*   ： BFC(        )*/
    .container{
        width:1000px;height:400px;border: 1px solid red;
    }
    .left{
        width:200px;height:100%;background: gray;
        float: left;
    }
    .right{
        overflow:hidden;  /*   bfc */
        background: green;
    }

/*   ： flex   */
    .container{
        width:1000px;height:400px;border:1px solid red;
        display:flex;         /*flex  */
    }
    .left{
        width:200px; height:100%;background:gray;
        flex:none;
    }
    .right{
        height:100%;background:green;
        flex:1;        /*flex  */
    }

/*    ： table   */
    .container{
        width:1000px;height:400px;border:1px solid red;
        display:table;         /*table  */
    }
    .left{
        width:200px; height:100%;background:gray;
        display:table-cell;
    }
    .right{
        height:100%;background:green;
        display: table-cell;
    }

/*   ： css    calc*/
    .container{
        width:1000px;height:400px;border:1px solid red;
    }
    .left{
        width:200px;height:100%;background:gray;
        float:left;
    }
    .right{
        height:100%;background:green;
        float:right;
        width:calc(100% - 200px);
    }
style>