在史前時(shí)代，大家喜歡用frameset來做框架結(jié)構(gòu)。回想起來frameset的優(yōu)點(diǎn)在于布局的自適應(yīng)。frameset已經(jīng)早不是web標(biāo)準(zhǔn)推薦的了。而且弄這么多頁面去實(shí)現(xiàn)這個(gè)效果也很蹩腳。其實(shí)可以用css布局和定位來實(shí)現(xiàn)這樣的效果的。下面是一個(gè)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">頂部內(nèi)容(iframe上scrolling="yes" style="overflow:visible;"防止IE6出現(xiàn)iframe橫向滾動(dòng)條)</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">底部內(nèi)容</div>
</body>
</html>
代碼很簡潔，看著也很舒服，在IE6下也能堅(jiān)強(qiáng)的正確的顯示著。
可以參考blueidea論壇里面的這個(gè)經(jīng)典的帖子：
http://bbs.blueidea.com/thread-2818595-4-1.html