web后台布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.2-min.js" charset="utf-8" type="text/javascript"></script>
</head>
<style>
*{padding:0;margin:0;}
html,body{height:100%;width:100%;overflow:hidden;}
#mrtTop{height:100px; background:#ccc}
#mrtMiddle{POSITION:ABSOLUTE;top:100px;left:0;bottom:100px;right:0}
#mrtLeft{height:100%;width:200px;float:left; overflow:auto;background:#ddd}
#mrtRight{height:100%;margin-left:200px; overflow:auto;background:#fff}
#mrtBottom{position:ABSOLUTE;bottom:0;left:0;right:0;height:100px;background:#f00 }
</style>
<body id='body'>
<div id="mrtTop">
<div style="height:100%;overflow:auto;">
TOP<br />
TOP<br />
TOP<br />
TOP<br />
TOP<br />
TOP<br />
TOP<br />
TOP<br />
TOP<br />
</div>
</div>
<div id="mrtMiddle">
<div id="mrtLeft">
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
LEFT<br />
</div>
<div id="mrtRight">
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
RIGHT<br />
</div>
</div>
<div id="mrtBottom">
<div style="height:100%;overflow:auto;">
Bottom<br />
Bottom<br />
Bottom<br />
Bottom<br />
Bottom<br />
Bottom<br />
</div>
</div>
<script>
$("#mrtMiddle").height($("html,body").height() - $("#mrtTop").height() - $("#mrtBottom").height());
$(window).resize(function() {
$("#mrtMiddle").height($("html,body").height() - $("#mrtTop").height() - $("#mrtBottom").height());
});
</script>
</body>
</html>
