两列布局的页面，要正好动态充满当前浏览器的窗口


做一个两列布局，其中左侧列宽度固定，右侧列随着浏览器的窗口变化动态调整，整个页面要正好充满当前浏览器的可用窗口（浏览器不会出现滚动条），使用CSS如何做呢？我的布面设计如下：leftDiv为左侧列，rightDiv为右侧列，rightDiv中又被分为topDiv,centerDiv,bottomDiv。如果html, body 的CSS的overflow设置为hidden，浏览器不会出现滚动条，但其实滚动条是被人为的隐藏了（事实上此时rightDiv实际大小已经超出了浏览器的当前窗口大小），如果设置为 scroll,滚动条会显示，显示出rightDiv实际大小。请问如果确定CSS，使得leftDiv,rightDiv显示的大小即为实际大小，并且布面正好充满当前浏览器的可用窗口。请大家帮忙改动一下，十分感谢<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WiseInfo</title>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
}
html, body {
height:100%;
overflow: scroll;
}
html>body { /*-- for !IE6.0 --*/
width: auto;
height: auto;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
body {
border:8px solid #ffffff;
background-color: #ffffff;
}
#mainDiv {
width: 100%;
height: 100%;
_padding-left:160px;
}
#rightDiv {
width: 100%;
height: 100%;
_padding:100px 0px;
}
#mainDiv>#rightDiv {
width:auto;
position:absolute;
left:160px;
right:0px;
}
#leftDiv {
width:156px;
height:100%;
background-color:#99FF33;
position:absolute;
top:0px;
left:0px;
}
#centerDiv {
width: 100%;
height: 100%;
background-color:#00CCFF;
}
#rightDiv>#centerDiv {
height:auto;
position:absolute;
top:100px;
bottom:100px;
}
#topDiv{
height:96px;
width:100%;
background-color:#9933FF;
position:absolute;
top:0px;
}
#bottomDiv{
height:96px;
width:100%;
background-color:#FF9900;
position:absolute;
bottom:0px;
_bottom:-1px; /*-- for IE6.0 --*/
}
-->
</style>
</head>
<body>
<div id="mainDiv">
<div id="leftDiv"></div>
<div id="rightDiv">
<div id="topDiv"></div>
<div id="centerDiv"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<div id="bottomDiv"></div>
</div>
</div>
</body>
</html>