1.效果
三栏布局 ，三栏的高度各随内容变化，内容多就长一点，内容少就短一点，但背景色始终填满各栏，左栏宽度始终为200px,右栏宽度始终为250px,中间栏宽度最少为350，可随浏览器窗口的增大而增大。如下图 所示：
使浏览器窗口变宽，则中间栏变宽，左右栏不变。
2.代码
html部分
<body>
<div class="background">
<div class="header">这是头标</div>
<div class="leftcol">
<div>这是左侧栏.这是左侧栏.这是左侧栏.这是左侧栏.</div>
</div>
<div class="rightcol">
<div >
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
这是右侧栏.这是右侧栏.
</div>
</div>
<div class="centercol">这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.</div>
<div class="footer">这是脚标。脚标div使用了clear:both;使左侧栏或右侧栏的长度长于中间栏时自动下降避开它们的覆盖。</div>
</div>
</body>
css部分
body {
margin: 0px; /*取消部分浏览的默认值*/
}
div
{
padding:.5em;
}
div.background {
padding:0;
min-width: 800px;
margin: 0 auto; /*居中*/
width: 80%; /*相对body的宽度*/
background-image: linear-gradient(90deg,#bdf5d9 200px,#fff 200px,#fff calc(100% - 250px),#f6cb8f calc(100% - 250px));
/*上句将三栏的背景色设在ground div上，避免出现背景色中断*/
}
div.header {
font-family: 黑体;
text-shadow: 3px 3px 3px #333;
background-color: #f00;
color: #fff;
}
div.leftcol {
padding:0;
width: 200px; /*定宽*/
float: left;
}
div.rightcol {
padding:0;
width: 250px; /*定宽*/
float: right;
/*飘浮者的上限是其在文档位置的前的一个块元素的下边沿，下限没有规定*/
}
div.centercol {
margin: 0 250px 0 200px;
/*仍在流中*/
}
div.footer {
background-color: #70e1f6;
color: #fff;
text-shadow: 2px 2px 3px #333;
clear: both;
}
3.要点。利用float属性使左右栏漂浮，利用margin属性让出左右栏空间，利用clear属性调整footer的位置，利用calc（）计算背景色的位置，利用linear-gradient设置假的背景色。详见代码中的注释。
