CSS网页布局---左侧栏固定，右侧栏自适应的骨灰级讲解

左侧栏固定右侧栏自适应的布局在开发过程中真的可谓是屡见不鲜，今天我们就来聊聊这个司空见惯的布局方式。。。啦啦啦。。。

首先把html的基本骨架写出来,代码如下：<div class="container"> <div class="left"></div> <div class="right"></div> </div>

第一种：左侧浮动，右侧宽度百分比，margin-left为左侧栏的宽度值

html,body{
height: 100%;
margin: 0;
padding: 0;
}
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
}
div.left{
height: 100%;
width: 300px;
float: left;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
margin-left: 300px;
}

第二种：子绝父相，父亲设置相对定位，儿子设置绝对定位，左侧宽度固定，右侧栏还是和第一种一样

html,body{
height: 100%;
margin: 0;
padding: 0;
}
div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
position: relative;
}
div.left{
height: 100%;
width: 300px;
position: absolute;
left: 0px;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
margin-left: 300px;
}

div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
}
div.left{
height: 100%;
width: 300px;
float:left;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
overflow:hidden;
}

第四种：左侧栏float:left,右侧栏float:right,右侧栏设置负边距，margin的负边距博大精深！

div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
}
div.left{
height: 100%;
width: 300px;
float:left;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
float: right;
margin-right: -300px;
}

第五种：使用flex弹性布局，把container设置为flex即可

div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
display: flex;
}
div.left{
height: 100%;
width: 300px;
background-color: deeppink;
}
div.right{
width: 100%;
background-color: aqua;
height: 100%;
}

div.container{
height: 100%;
width: 100%;
background-color: ghostwhite;
display: table;
}
div.left{
height: 100%;
width: 300px;
background-color: deeppink;
display: table-cell;
}

div.right{
background-color: aqua;！
height: 100%;
display: table-cell;
}

真心的希望能对大家在布局方面有所帮助！！！相互学习一起提高！