CSS-左固定右自适应

常见页面开发中，特别是后台系统，页面中会固定某一区域（而另一区域进行自适应，左边功能列表展示，右边
展示当前选中功能的具体信息），在页面的布局中，不需要针对某一个布局进行特别的研究，掌握布局使用的技
术之后，只需要进行对其相互的嵌套和组合即可满足大部分的开发场景。

一、左固定，右自适应（如果方向相反，对应值设置为相反即可）
HTML

    
left
    
right

CSS

/*方法一
display:inline-block+calc
*/
div{
    display:inline-block;
}
.left {
    width: 200px;
    background: #eee;
}

.right {
    width: calc( 100% - 201px);/*CSS3新属性*/
    background: red;
}

方法一.png

/*方法二
display:flex
*/
body {
    height: 100%;
    display: flex;
}

.left {
    min-width: 300px;（固定宽度设置为最低宽度即可）
    background: #eee;
}

.right {
    width: 100%;
    background: red;
}

方法二.png

/*方法三
display:flex + flex
*/
body {
    height: 100%;
    display: flex;
    align-items: flex-satrt;
}

.left {
    width: 300px;/*不需要设置最低宽度*/
    background: #eee;
    flex: 0 0 auto;
}

.right {
    width: 100%;
    background: red;
    flex: 1 1 auto;
}

方法三.png

/*方法四
position:absolute;
*/
div {
    height: 100%;
}

.left {
    width: 300px;
    background: #eee;
}

.right {
    width: 100%;
    background: red;
    position: absolute;
    top: 0;
    left: 300px;
}

方法四.png