在史前时代，大家喜欢用frameset来做框架结构。回想起来frameset的优点在于布局的自适应。frameset已经早不是web标准推荐的了。而且弄这么多页面去实现这个效果也很蹩脚。其实可以用css布局和定位来实现这样的效果的。下面是一个demo:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div仿框架布局</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html,body { height:100%; overflow:hidden;}
/*reset panel posotion*/
.panel{position:absolute;top:0px;right:0px;bottom:0px; left:0px; z-index:1;}
.top { height:50px; background-color:#ccc;}
.left { top:50px; bottom:50px; width:200px; background-color:#eee;}
.main { left:200px; top:50px; bottom:50px;background-color:#f5f5f5;}
.bottom { top:auto; height:50px;background-color:#ccc;}
.panel iframe { width:100%; height:100%;}
/* class for hide top*/
.hidetop .top{display:none;}
.hidetop .left,.hidetop .main{top:0px;}
/* class for hide bottom*/
.hidebottom .bottom{display:none;}
.hidebottom .left,.hidebottom .main{bottom:0px;}
/*class for hide left*/
.hideleft .left{display:none;}
.hideleft .main{left:0px;}
/* HACK:*IE6/7 _IE6*/
html { *padding:50px 0px 50px 0px;}
.panel{*position:relative;}
.top { *margin-top:-50px; *margin-bottom:0px; }
.left { *height:100%; *float:left; *top:0px; }
.main { *height:100%; *top:0;*left:0px;_left:-3px;}/*IE 6 float 3px bug*/
.hidetop{*padding-top:0px;}
.hidebottom{*padding-bottom:0px;}
.hideleft{*padding-left:0px;}
</style>
<script type="text/javascript">
function toggleClass(dom,className){
var reg = new RegExp(className,"g"),
cn = dom.className,
newcn= cn.indexOf(className)==-1?(cn+" "+className):cn.replace(reg,"");
dom.className=newcn;
}
</script>
</head>
<body>
<div class="panel top">顶部内容(iframe上scrolling="yes" style="overflow:visible;"防止IE6出现iframe横向滚动条)</div>
<div class="panel left">
<input type="button" id="" name="" value="收起/显示上部" onclick="toggleClass(document.getElementsByTagName('html')[0],'hidetop')" />
<br />
<input type="button" id="" name="" value="收起/显示左部" onclick="toggleClass(document.getElementsByTagName('html')[0],'hideleft')" />
<br />
<input type="button" id="" name="" value="收起/显示下部" onclick="toggleClass(document.getElementsByTagName('html')[0],'hidebottom')" />
</div>
<div class="panel main" ><iframe frameborder="0" scrolling="yes" style="overflow:visible;" src="http://www.baidu.com"></iframe></div>
<div class="panel bottom">底部内容</div>
</body>
</html>
代码很简洁，看着也很舒服，在IE6下也能坚强的正确的显示着。
可以参考blueidea论坛里面的这个经典的帖子：
http://bbs.blueidea.com/thread-2818595-4-1.html