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

常用侧栏固定宽度，内容栏的宽度自适应，在不同的分辨率下实现宽度自适应。下面是我根据工作实践总结的一些实现方法的demo。

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

html结构：

<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>

css部分：

*{ 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

html结构同上

css部分：

*{ 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布局

html结构同上

css部分：

*{ 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; }