纯CSS实现三列布局(两边固定，中间自适应)

看了一些网上的案例，感觉较繁杂，于是，自己整理了一篇来说明这个东西。

也是给我自己复习吧，以前有人问道，我还没答上来呢。＝＝

好吧，直接上代码：
这是HTML代码：

<div class="top">this is topdiv>
<div class="container1">
    <div class="left1">this is leftdiv>
    <div class="center1">this is centerdiv>
    <div class="right1">this is rightdiv>
div>
<div class="footer">this is footerdiv>

然后是CSS：

.top{
    width: 100%;
    height: 40px;
    background-color: #cccccc;
}
.footer{
    width: 100%;
    height: 50px;
    background-color: #abdc44;
}
/*左右固定，中间自适应*/
/*Start*/
.container{
    width: 100%;
    height: 100%;
    position: relative;
}
.left{
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 800px;
    background-color: black;
}
.center{
    width: auto;    /*如果没有这一句，那么，center这个div的文字就不会自动换行*/
    margin: 0 400px;
    height: 1000px;
    background-color: yellow;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 900px;
    background-color: red;
}
/*End*/

效果是这样的：