<html style="overflow:hidden"> <head> <title>jqueryuejin简易后台框架设计</title> <script src="/Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { layoutrezise(); AutoHeight(); }) function layoutrezise() { var headerH = $("div#Headbox").height(); var footerH = $("div#Footerbox").height(); var bodyerH = $(window).height() - headerH - footerH; $("div#Bodybox,div#bleftBox,div#brightBox,iframe#leftiframe,iframe#mainframe").height(bodyerH); $("div#brightBox").width($(window).width() - $("div#bleftBox").width()); } function AutoHeight() { $(window).resize(function () { layoutrezise(); }) } </script> </head> <body> <div id="Headbox"> 顶部 </div> <div id="Bodybox"> <div id="bleftBox" style="200px"> <iframe id="leftiframe" name="leftiframe" style="100%; border:0;" src="/Manage/Left"></iframe> </div> <div id="brightBox"> <iframe id="mainframe" name="mainframe" style="100%; border:0;" src="/Manage/Welcome"></iframe> </div> <div class="clear"></div> </div> <div id="Footerbox"> 底部 </div> </body> </html>
注意：
1、文档中html样式设置成style="overflow:hidden"( 以兼容IE)
2、iframe样式设置为：style="100%; border:0;"
3、需要固定Headbox和Footerbox的高度以及bleftBox的宽度，才得以正常自适应中间区域的高度和宽度。
4、布局中的div不要设置border宽度，以免计算高度和宽度时有误差