关于用div实现frame固定框架的问题

我要用div实现顶上若干行固定的层，下面的内容可滚动。这个本来用框架很容易实现，但框架的确麻烦，还要两个文件，也听过有人说：现在还用frame呀？out了。
可用div实现时，会有很多问题，首先一个是不同浏览器的表现不一样，特别是IE，经常不能用。我用下面的代码在ie中就不行，在遨游双核的快速模式是可以的，但兼容模式（应该是ie内核吧）就不行，下面一滚动，上面的也滚跑了。
<div align=center style="position:fixed; left:0px; top:0px; width:100%; height:165px; z-index:1; border:#FF0000;background-color:#FFFF33;" >
111<br>222<br>33<br>44<br>55<br>66<br>
</div>
<div align=center style="position:absolute; left:0px; top:166px; width:100%; overflow:auto">
111<br>222<br>33<br>44<br>55<br>66<br>
111<br>222<br>33<br>44<br>55<br>66<br>
111<br>222<br>33<br>44<br>55<br>66<br>
111<br>222<br>33<br>44<br>55<br>66<br>
111<br>222<br>33<br>44<br>55<br>66<br>
111<br>222<br>33<br>44<br>55<br>66<br>
111<br>222<br>33<br>44<br>55<br>66<br>
</div>
我就想怎么搞能实现这功能，在多浏览器中都能用，特别是IE中要能用？
不要说用啥jquery啥的框架呀，我就要这点功能，用啥框架太大了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>信息管理系统</title>
    <style type="text/css">
        html,body{width:100%;height:100%;margin:0px;padding:0px;*overflow-y:visible;}
        #pg{background-color:#fff;position:absolute;z-index:100;width:100%;height:100%;left:0px;top:0px;overflow:auto;}
        #mb{position:absolute;z-index:103;width:100%;height:24px;left:0px;top:0px;background-color:#d4d0c8;line-height:24px;padding-top:2px;overflow:hidden;}
        span{font-size:small;padding:1px 8px;cursor:default;border:solid 1px #d4d0c8;}
        span:hover{border-color:#fff #808080 #808080 #fff;}
        #bd{position:absolute;z-index:102;width:100%;left:0px;top:26px;bottom:20px;overflow:auto;*height:expression(document.documentElement.clientHeight-46+'px');}
        iframe{width:100%;height:100%;}
        #ft{position:absolute;z-index:101;width:100%;height:20px;left:0px;bottom:0px;font-size:small;text-align:center;background-color:#d4d0c8;line-height:20px;overflow:hidden;}
    </style>
    <script type="text/javascript">
        function ShowPg(n){if(n==init.selItm)return;var ss=document.getElementById('mb').childNodes;e=document.getElementsByTagName('iframe')[0];ss[init.selItm].style.backgroundColor='';ss[init.selItm].style.borderColor='';init.selItm=n;ss[n].style.backgroundColor='#fff';ss[n].style.borderColor='#00f';switch(n){case 0:e.src='http://www.baidu.com';break;case 1:e.src='about:blank';break;case 2:e.src='about:blank';break;case 3:e.src='about:blank';break;case 4:e.src='about:blank';}}
        window.init={selItm:0};
    </script>
</head>
<body>
    <div id="pg">
        <div id="mb"><span style="background-color:#fff;border-color:#00f;" onclick="ShowPg(0);">Itmem0</span><span onclick="ShowPg(1);">Itmem1</span><span onclick="ShowPg(2);">Itmem2</span><span onclick="ShowPg(3);">Itmem3</span><span onclick="ShowPg(4);">Itmem4</span></div>
        <div id="bd"><iframe frameborder="0" src="http://www.baidu.com"></iframe></div>
        <div id="ft">版权所有©：</div>
    </div>
</body>
</html>
二楼的朋友给的代码，可以实现我要的功能。
然后我就根据这个css修改我的代码，结果就是不行。
然后就不断修改，不断减少代码，尽量与二楼的代码一致……
最后改了几个小时，代码已经几乎都一样了，还是不行……
人已经快疯狂了，最后才发现问题在doctype上，我一直以为这个没啥用的，所以都没用，今天才发现问题在这里!
这个doctype竟然会影响到样式的使用，太出意外了。
然后把自己编写的几个小程序加上这个doctype，突然又发现问题了：原来设置的样式字体大小又没用了，仔细一查，原来不加doctype时不写大小的单位px，也会承认的，但加了doctype后，就不认了。
感谢二楼的代码，现在基本上搞定了这个问题。从中学习到了：1.第一次知道CSS中还能用程序；2.原来一直不知道该如何设置下框架的高度（用剩下全部的），用程序是一种办法，后来发现可以直接设置bottom即可。
问题补充：如何搞个左右两个框架呀？用相同的方法，右边框架上下滚动、左边的也滚动了，这个问题如何解决？
ie6下同时设置top和bottom，bottom失效。所以用到css:expression。