在网上找了很久，发现大部分都是固定宽度设置两栏，全屏情况下的布局很少。最后终于完成了，写出来备查，也供大家参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <TITLE>测试布局</TITLE> <script language="javascript" type="text/javascript" src="js/jquery-min.js"></script> <style type="text/css"> <!-- div{margin:0px;padding:0px;} /*基本信息*/ body {font:12px Simsun;margin:0px;background:#FFF;color:#000;} /*页面层容器*/ #divContainer {100%;clear:both;} /*页面头部*/ #divHeader {clear:both;height:120px;background:#FFCC99;} /*页面主体*/ #divMainContent {clear:both;height:400px;background:#CCFF00;position:relative;} #divLeftSidebar {200px;position:absolute; height:100%;} #tbSpliter{8px;height:100%;border:0px;border-collapse: collapse; background-image:url(images/pushPinBg.gif);} #divSidebarSpliter {margin-left:200px;8px;position:absolute; height:100%;} #divRightContent {margin-left:208px;height:100%;background:#EEE;} /*页面底部*/ #divFooter {clear:both;height:25px;background:#00FFFF;} --> </style> </head> <body> <div id="divContainer"> <div id="divHeader"> <iframe id="headFrame" name="headFrame" frameborder="no" scrolling="no" noresize="noresize" src="Head.aspx" height="92" width="100%"></iframe> <iframe id="topFrame" name="topFrame" frameborder="no" scrolling="no" noresize="noresize" src="Top.aspx" height="28" width="100%"></iframe> </div> <div id="divMainContent"> <div id="divLeftSidebar"> <iframe name="leftFrame" id="leftFrame" src="Left.aspx" scrolling="no" noresize="noresize" height="100%" width="100%" frameborder="0" ></iframe> </div> <div id="divSidebarSpliter"> <TABLE id="tbSpliter"> <TR><TD height="35%"></TD></TR> <TR><TD><IMG id="imgSpliter" onclick="toggleDockPanel();" style="CURSOR:pointer" alt="" src="images/pushPinOpen.gif"></TD></TR> <TR><TD height="55%"></TD></TR> </TABLE> </div> <div id="divRightContent"> <iframe name="mainFrame" id="mainFrame" src="Main.aspx" scrolling="no" noresize="noresize" height="100%" width="100%" frameborder="0" ></iframe> </div> </div> <div id="divFooter"> <iframe src="Bottom.aspx" name="bottomFrame" frameborder="no" scrolling="no" noresize="noresize" width="100%" height="24" ></iframe> </div> </div> <script type="text/javascript"> $(document).ready(function () { self.moveTo(0,0); self.resizeTo(screen.availWidth,screen.availHeight); ResetDivContentHeight(); }) $(window).resize(ResetDivContentHeight); function ResetDivContentHeight() { $("#divMainContent").height($(window).height() - $("#divHeader").height()-$("#divFooter").height()); } function toggleDockPanel(){ if($("#divLeftSidebar").css("display")=="none"){ $("#divLeftSidebar").show(); $("#imgSpliter").attr("src",'images/pushPinOpen.gif'); $("#divSidebarSpliter").css("margin-left",200); $("#divRightContent").css("margin-left",208); }else{ $("#divLeftSidebar").hide(); $("#imgSpliter").attr("src",'images/pushPinClose.gif'); $("#divSidebarSpliter").css("margin-left",0); $("#divRightContent").css("margin-left",8); } } </script> </HTML>