css div三栏布局 左右固定宽 中间自适应
三栏布局，这是一种相对比较常见的页面布局，这里提供2种实现方法：
方法1：
使用最新的css3伸缩盒布局属性，可轻松实现（三栏等高，默认就是三栏等高哟！）
.header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:
#bbb;text-align: center;} .main{} .content{overflow: hidden;background-color:
#a4e88c;} .left{width: 100px;background-color: #E79F6D;} .right{width:
100px;background-color: #7BD;} .left,.right,.content{min-height: 200px;_height:
200px;} /*伸缩盒布局*/ .flex-container{display: flex;} .content{flex:1;} .left{order:-1;}
</style>
<div class="header">
页头100px
</div>
<div class="main flex-container">
<div class="content">
中间自适应
</div>
<div class="left">
左边宽100px左边宽100px左边宽100px
</div>
<div class="right">
右边宽150px
</div>
</div>
<div class="footer">
页脚100px
</div></td></tr></table>
提示：你可以先修改部分代码再运行。
方法2：（不考虑三栏加载顺序,中间栏不用额外加层）
主要运用的是触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局的，源码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float:
right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content:
"";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color:
#0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont{min-height:
300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;} /*
三列等高 */ .left{width: 150px;background-color: #f00;} .right{width: 150px;background-color:
#008080;} .cont{overflow: hidden;background-color: #900;_zoom:1;} .footer{height:
100px;background-color: #0080FF;}
</style>
<div class="header">
这是头部
</div>
<div class="main">
<div class="left fl">
left
</div>
<div class="right fr">
right
</div>
<div class="cont">
cont
<br />
触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局：不考虑三栏加载顺序,中间栏不用额外加层
<br />
防止.cont被隐藏：body{min-width:2x.left .right}
</div>
</div>
<div class="footer">
footer内容
</div>
</body>
</html></td></tr></table>
提示：你可以先修改部分代码再运行。
方法3：（传说中的圣杯/双飞翼布局,中间自适应栏可优先加载）
主要运用的是浮动float 和margin的结合使用，源码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float:
right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content:
"";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color:
#0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont_inner{min-height:
300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;}/*
三列等高 */ .cont{width: 100%;} .cont_inner{margin-left: 150px;margin-right:
150px;background-color: #900;} .left{width: 150px;background-color: #f00;margin-left:
-100%;} .right{width: 150px;background-color: #008080;margin-left: -150px;}
.footer{height: 100px;background-color: #0080FF;}
</style>
<div class="header">
这是头部
</div>
<div class="main">
<div class="cont fl">
<div class="cont_inner">
cont
</div>
</div>
<div class="left fl">
left
</div>
<div class="right fr">
right
</div>
</div>
<div class="footer">
footer内容
</div>
</body>
</html></td></tr></table>
提示：你可以先修改部分代码再运行。
从源代码上来看，要不讲究栏目加载顺序，方法1是比较简洁的；但要求自适应栏目优先加载，圣杯布局无疑是首选方案！
另外补充下，圣杯布局是比较灵活的一种布局方式：表现为不改动html结构，只调整css样式，即可实现各种布局，如用下面的任一代码替换上面方法2的对应部分即可实现不同布局：
.cont_inner{margin-right: 300px;background-color: #900;}
.left{width: 150px;background-color: #f00;margin-left: -300px;}
.right{width: 150px;float: left;background-color: #008080;margin-left:-150px;}
或
.cont_inner{margin-left: 300px;background-color: #900;}
.left{width: 150px;background-color: #f00;margin-left: -100%;}
.right{width: 150px;float: left;background-color: #008080;margin-left:-100%;position: relative;left: 150px;}
其它布局，请自行折腾组合 ^_^
您可能感兴趣的文章：
CSS基本布局16例
CSS floats来创建三栏网页布局的方法
css div三栏布局 左右固定宽 中间自适应
经验分享：CSS组合CLASS来完成网页布局风格
css 左列自适应宽度的一行两列布局
CSS3中使用媒体查询（media query）适配布局
WEB2.0标准教程：第九天 第一个CSS布局实例
老师不会教的【DIV间距设置】技巧
CSS创建各栏同高的多栏布局
Css实现左栏固定宽度，右栏自适应宽度实例