上中下三栏布局

上下栏高度固定，中间栏高度自适应的三栏布局。其中底部始终在页面最底。示意图如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上中下三栏布局</title>
<style type="text/css">
html, body, .container {margin:0;padding:0;height: 100%;}
body > .container {height: auto; min-height: 100%;}
#main {height: 100%;padding-bottom: 35px;}  /* 必须使用和footer相同的高度 */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;}
.clearfix{display:inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
#header{height:90px;}
#footer{height: 35px;line-height: 35px;text-align: center;position:relative; margin-top: -35px;clear:both;}
#header{background-color:#666666;}
#footer{background-color:#999999;}
</style>
</head>
<body>
    <div class="container">
        <div id="main" class="clearfix">
            <!-- 头部 -->
            <div id="header"></div>
        </div>
    </div>
    <!-- 底部 -->
    <div id="footer"></div>
</body>
</html>

上中下三栏布局

推荐阅读