DIV+CSS布局实例：一个经典的网页CSS布局_H5之家 - 中国HTML5教程资源分享第一站

有下面这样的一个DIV+CSS布局，要求如下：

整个页面充满窗口，当窗口缩小放大时自动调整，不能出现窗口的滚动条，但小于定义的最小宽高时可以出现。
头部（1）固定高度40px，宽度自适应窗口宽度。
左侧（2）固定宽度150px，高度为窗口高度减去头部的40px，不是固定值。
右侧（4）与左侧（2）一样。
中间（3）宽高都是不固定的，宽是窗口宽度减去左右两侧，共减去300px，高度是窗口高度减去头部（1）跟底部（5），共减去100px。
底部（5）是中间（3）的附属部分，高度固定60px。
最后加个小小附加题，在中间（3）里加个input文本框，上左右边距始终10px，宽度不固定，随着中间（3）宽度的变化而变化。
不能使用javascript，只能用css，不考虑IE6。

具体的实现代码为：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        html,body{margin: 0;padding: 0;background: yellow;height: 100%;}
       .top{height: 40px;width: 100%;background: red;}
       .content{height: 100%;background: green;position: relative;}
       .left{width: 150px;position:absolute;top:0;left:0;height: 100%;background: #4169e1;}
       .right{width:150px;position:absolute;right:0px;top:0;background: #9acd32;}
        .main{height: 100%;margin-left: 150px;margin-right: 150px;background: #8a2be2;position:relative}
        .b{position:absolute;bottom:0px;left:0;height: 60px;width: 100%;background: yellow;}
        .a{}

    </style>
</head><body>
<div class="top"></div>
<div class="content">
    <div class="left"></div>
    <div class="main">
        <div class="a"></div>
        <div class="b"></div>
    </div>
    <div class="right"></div>

</div>
<script>
    window.onload=function(){
        console.log(document.body.clientHeight)
        console.log(document.body.scrollHeight)
    }
</script>
</body>
</html>