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

用DIV+CSS做一个三行三列的页面。三行分为页头、内容区、页脚，页头高度为100px，页脚高度为50px，内容区的刚好充满剩余的屏幕，当浏览器窗口大小变化时，内容区的高度及宽度也随之自适应变化，并刚好充满剩余屏幕空间。内容区又分为左栏、中栏、右栏。内容区的左栏宽度为100px，右栏宽度为30px，中栏也要刚好充满内容区的剩余空间，当浏览器窗口大小变化时，中栏的高度及宽度也随之自适应变化，并刚好充满内容区的剩余空间。如何做？要求：在Firefox及IE中要一致。网上虽然也一些例子，但都不能达到这个要求，请大家帮忙。

解决方案 »

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

<!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>
#top{
width:100%;
height:100px;
margin-top:0px;
background:#099;
}
#bottom{
width:100%;
float:left;
height:50px;
margin-bottom:0px;
background:#00C;
}
#center{
width:100%;
float:left;
}
#center_left{
width:100px;
background:#900;
float:left;
}
#center_right{
width:30px;
float:left;
background:#666;
}
#center_middle{
float:left;
background:#F00;
}
.center{
float:left;
margin-left:0px;
}
</style>
</head><body>
<div id="top"></div>
<div id="center">
<div class="center" id="center_left"></div>
    <div class="center" id="center_middle"></div>
    <div class="center" id="center_right"></div>
</div>
<div id="bottom"></div>
</body>
</html>
<script>
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
var temp_height = height -100-50;
var temp_width = width -100 -65;//本来该width-100-30 但是ff下有margin
document.getElementById("center").style.height = temp_height + "px";
document.getElementById("center_left").style.height = temp_height + "px";
document.getElementById("center_right").style.height = temp_height + "px";
document.getElementById("center_middle").style.height = temp_height + "px";
document.getElementById("center_middle").style.width = temp_width + "px";</script>
ff下的ie下的自己随便修改一下就可以了
谢谢！我试了试lieri111的页面设计代码，开始运行是满足要求，但光浏览器窗口放大或缩小时，表现就不正常了，在IE及FF中都是一样。能不能修改一下，当浏览器窗口大小变化时，DIV高度及宽度自适应变化
table+div?怎么做，来个样例吧。万分感激
就是在div中嵌套table，或者table嵌套div，两者相互嵌套
实例：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<div>
<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR></TABLE>
</div>
<div>
<TABLE>
<TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</div>
<div>
<TABLE>
<TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
谢谢。我刚学CSS设计，能不能针对我的要求设计一个DIV+TABLE的页面？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
</HEAD> <BODY>
<table width="100%" height="100%" border="1">
<TR>
<td height="100" bgcolor='red'></td>
</TR>
<TR>
<td >
<table width="100%" height="100%">
<tr>
<td width="100" bgcolor='red'></td>
<td></td>
<td width="30" bgcolor='blue'></td>
</tr>
</table>
</td>
</TR> <TR>
<td height="50" bgcolor='black'></td>
</TR>
</table>
</div>
</BODY>
</HTML>
原来这种可以用table来解决 = =
请参考:http://www.web666.net/html/div.html
谢谢xk1126！恕偶愚钝，想继续再问一下。现在我要在表的各个网格中加一个DIV,如下代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
</HEAD> <BODY>
<table width="100%" height="100%" border="1">
    <TR>
        <td height="100" bgcolor='red'><div></div></td>
    </TR>
    <TR>
        <td >
            <table width="100%" height="100%">
                <tr>
                    <td width="100" bgcolor='red'><div></div></td>
                    <td><div></div></td>
                    <td width="30" bgcolor='blue'><div></div></td>
                </tr>
            </table>
        </td>
    </TR>    <TR>
        <td height="50" bgcolor='black'><div></div></td>
    </TR>
</table>
</div>
</BODY>
</HTML>当浏览器缩放时，DIV正好充满网格，以实现我在帖子所说的效果，怎么设置。帮帮忙。万分感激