头大的DIV+CSS高度自适应问题，请各位高人不吝赐教！！！
想用DIV+CSS做一个三行两列的布局
要求：页面自适应屏幕高度宽度，浏览器不出现滚动条，适用IE，FireFox等。
其中“header”和“footer”高度固定，“footer”在屏幕最下边，紧贴浏览器状态栏。“leftdiv”与“rightdiv”需要自适应高度及宽度。
页面源码如下。刚开始学，遇到问题实在是不知该如何解决，请各位高人帮忙。因为用js到是可以达到要求，但想在这里求个不用js的。
- HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="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=gb2312" /><title>Caterpillar</title><style type="text/css"><!--* { margin: 0px; padding: 0px;}body { height: 100%;}#container { margin-right: auto; margin-left: auto;}#header { background-color: #003300; height: 60px; color: #FFFFFF;}#leftdiv { background-color: #99CC00; float: left; width: 200px;}#rightdiv { background-color: #666600; margin-left: 200px;}#footer { clear: both; height: 30px; color: #FFFFFF; background-color: #990000;}--></style></head><body><div id="container"> <div id="header">header</div> <div id="content"> <div id="leftdiv">leftdiv</div> <div id="rightdiv"> <p>rightdiv</p> </div> </div> <div id="footer">footer</div></div></body></html>[解决办法]
- HTML code
<!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=gb2312" /><title>Caterpillar</title><style type="text/css"><!--* { margin: 0px; padding: 0px;}body { height: 100%;}#container { margin-right: auto; margin-left: auto;}#header { background-color: #003300; height: 60px; color: #FFFFFF;}#leftdiv { background-color: #99CC00; position:absolute; left:0%; right:80%; top:60px; bottom:50px; width: 200px;}#rightdiv { background-color: #666600; /* margin-left: 200px;*/ position:absolute; left:15.5%; right:0%; top:60px; bottom:50px;}#footer { clear: both; position:absolute; bottom:1px;left:1px;right:1px; height: 50px; color: #FFFFFF; background-color: #990000;}--></style></head><body><div id="container"> <div id="header">header</div> <div id="content"> <div id="leftdiv">leftdiv</div> <div id="rightdiv"> <p>rightdiv</p> </div> </div> <div id="footer">footer</div></div></body></html>
[解决办法]
参考：http://blog.doyoe.com/article.asp?id=135