方法一.浮动布局

左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度

    div{height: 500px;}
        #middle {
            width: 100%;
            background-color: green;
        }
        #left{
            height: 500px;
            width: 300px;
            background-color: red;
             float:left;
        }
        #right{
            height: 500px;
            margin-left: : 300px;
            width: auto;
            background-color: blue;
        }

        <div id="middle">
        <div id="left"></div>
        <div id="right"></div>
    </div>

方法二.绝对定位布局

和上面浮动布局有相似之处，这个布局主要是左侧设置绝对定位，left:0使左侧靠近屏幕左侧边框，右侧margin-left：左侧宽度

    #left{
        position: absolute;
        left: 0;
        width: 200px;
        height: 500px;
        background-color: green;
    }
    #right{
        margin-left: 200px;
        height: 500px;
         background-color: red;
    }
    
    <div id="left"></div>
    <div id="right"></div>

方法三.双飞翼布局（浮动布局+负外边距）

了解这个之前先了解一下负外边距的使用，当负外边距设置在没有浮动的的元素上时并不会破坏正常的文档流，所以你使用负外边距将元素向上微调时候，后面的元素也会向上微调。如果对一个浮动元素使用负边距，它会产生一个空白的空间，其他的元素则能够覆盖住这一部分。如果负边距和宽度一样大的话，它就会被完全覆盖掉。因为外边距，内边距，边框和内容加起来等于元素的宽度。如果负外边距等于元素的宽度的话，那么该元素的宽度就会变成0px。了解这些会容易理解下面的内容

左侧left制定右边的负外边距，为这个元素的宽度，原本在下方的middle上移，middle的最左侧可以与屏幕最左侧对齐，此时middle的宽度是100%，因此需要为其子内容right指定一个左侧的外边距用于空出左侧栏的位置

    #left{
            width: 300px;
            background-color: yellow;
            float: left;
            margin-right: -300px;
        }
        #middle {
            width: 100%;
            float: left;
        }
        #right {
             margin-left:300px;
              background-color:aqua;
        }

<div id="left"></div>
    <div id="middle">
        <div id="right"></div>
    </div>

方法四.flex布局

这个原理是给middle添加display:flex,使之变成flex容器，给left指定固定的大小，放大缩小比例 为0，right放大缩小比例为1，大小自动占据剩下的部分

    #middle{
         display:flex;
        }
    #left{
        flex:0 0 200px;
        background-color: black;
    }
    #right{
        flex: 1 1;
        background-color: green;
    }
<div id="middle">
    <div id="left"></div>
    <div id="right"></div>
</div>