用DIV+CSS做一个三行三列的页面

用DIV+CSS做一个三行三列的页面。三行分为页头、内容区、页脚，页头高度为100px，页脚高度为50px，内容区的刚好充满剩余的屏幕，当浏览器窗口大小变化时，内容区的高度及宽度也随之自适应变化，并刚好充满剩余屏幕空间。内容区又分为左栏、中栏、右栏。内容区的左栏宽度为100px，右栏宽度为30px，中栏也要刚好充满内容区的剩余空间，当浏览器窗口大小变化时，中栏的高度及宽度也随之自适应变化，并刚好充满内容区的剩余空间。如何做？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://www.14px.com/?p=196  正好是三行三列。
<!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>
#main{
width:100%;
height:100%;
float:left;
}
#head{
height:100px;
width:100%;
float:left;
border:1px solid red;
}
#content{
width:100%;
height:500px;
float:left;
border:1px solid blue;
}
#content_left{
height:500px;
width:20%;
float:left;
border:1px solid black;
}
#content_middle{
width:inherit;
height:500px;
width:59%;
border:1px solid #900;
float:left;
}
#content_right{
height:500px;
width:20%;
float:left;
border:1px solid yellow;
}#foot{
width:100%;
height:50px;
float:left;
border:1px solid green;
}
</style>
</head><body>
<div id="main">
     <div id="head"></div>
     <div id="content">
          <div id="content_left"></div>
          <div id="content_middle"></div>
          <div id="content_right"></div>
     </div>
     <div id="foot"></div>
</div>
</body>
</html>
自适高度是在某一个高度里面才能的，不是你想让它自适就可以的，没有那个函数
这个里面的代码就是三行三列DIV+CSS自适应
谢谢。http://www.14px.com/?p=196的示例虽然是三行三列，但也不满足我的要求。例子中的两个DIV side，main并不是刚好充满屏幕空间，其实际大小已经超出了剩余空间。如果要满足我的要求，我想，应该有JS代码辅助才行
   关注，DIV格式比较难控制，多做几个网页就好了
用js吧，获取个浏览器高度给他什么的，div高度自适应确实很麻烦的
自适应http://blog.csdn.net/wwq0123/archive/2010/03/26/5420823.aspx
heigth:auto; 把高度的值等于auto（自动）你们需要的高度就可以自动了
heigth:auto; 把高度的值等于auto（自动）你们需要的高度就可以自动了
这个行的，加了一个right层。
测试后，main的边界清楚，布局没问题。唯一的问题是窗体太窄后右侧的层会被挤下来。<!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" />
    <meta name="author" content="Chomo" />
    <link rel="start" href="http://www.14px.com" title="Home" />
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html
        {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 100px 0;
            overflow: hidden;
        }
        div
        {
         border:2px inset #000;
        }

        html, body
        {
            height: 100%;
        }
        .top
        {
            position: relative;
            margin-top: -100px;
            height: 100px;
            background: #f60;
        }
        .side
        {
            position: relative;
            height: 100%;
            background: #fc0;
            overflow: auto;
            width: 200px;
            float: left;
            margin-right: 0 !important;
            margin-right: -3px;
            overflow: auto;
        }
        .main
        {
            position: relative;
            overflow: auto;
            height: 100%;
            background: #f30;

            z-index: 999;
        }
        .bottom
        {
            position: relative;
            height: 100px;
            background: #f60;
            clear: both;
        }
        .right
        {
         position: relative;
            height: 100%;
            background: #fc0;
            overflow: auto;
            width: 200px;
            float: right;

            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="top">
        top
    </div>
    <div class="side">
        side
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
    <div class="right">sss</div>
    <div class="main">
        <table id="testtable" border=1 width=100% height=100%><tr><td>测试内容区</td></tr></table>
    </div>
    <div class="bottom">
        bottom
    </div>
</body>
</html>