实现侧栏固定宽度，内容栏宽度自适应

方法一：固定宽度区浮动 float，自适应区宽度自适应设置 margin

<div class="content">
<div class="slider">
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
</ul>
</div>
<div class="main"></div>
</div>

*{
padding:0;
margin:0;
}
.content{
overflow:hidden;
_zoom:1;
}
.slider{
float: left;
width:90px;
padding:0 0 500px 0;
background-color: #f3f5f7;
}
.slider ul{
list-style:none;
}
.slider ul li{
line-height: 60px;
text-align: center;
border-bottom:1px solid #ccc;
}
.slider ul li a{
text-decoration: none;
color:#333;
font-size:14px;
}
.main{
background-color: #d6d6d6;
margin-left:90px;
padding:10px 0 300px 10px;
}

方法二：固定宽度区使用绝对定位，自适应区仍然设置margin

*{
padding:0;
margin:0;
}
.content{
position: relative;
}
.slider{
position: absolute;
left:0;
top:0;
width:90px;
padding:0 0 500px 0;
background-color: #f3f5f7;
}
.slider ul{
list-style:none;
}
.slider ul li{
line-height: 60px;
text-align: center;
border-bottom:1px solid #ccc;
}
.slider ul li a{
text-decoration: none;
color:#333;
font-size:14px;
}
.main{
background-color: #d6d6d6;
margin-left:90px;
padding:10px 0 300px 10px;
}

方法三：flex布局

*{
padding:0;
margin:0;
}
.content{
display:flex;
-webkit-display:flex;
}
.slider{
flex:0 0 90px;
width:90px;
padding:0 0 500px 0;
background-color: #f3f5f7;
}
.slider ul{
list-style:none;
}
.slider ul li{
line-height: 60px;
text-align: center;
border-bottom:1px solid #ccc;
}
.slider ul li a{
text-decoration: none;
color:#333;
font-size:14px;
}
.main{
flex:1;
background-color: #d6d6d6;
padding:10px 0 300px 10px;
}