HTML页面上面固定下面滚动的实现

http://blog.chinaunix.net/uid-14767524-id-2785539.html
在页面设计时，有时会碰到上边一小部分要固定（比如是一个动态生成的标题，高度不确定），而下边的具体内容则需要滚动显示的情形(在不使用框架集合的情况下)，今天自己试着写了一下，代码如下：

<html xmlns=" http://www.w3.org/1999/xhtml">
 <head> 
  <title>CSS Test</title>
  <style type="text/css">
   #p1{
    border:1px solid red;
    background-color:yellow;
    padding:10px;
   }
   #sub1{
    border:1px dashed green;
    background-color:#E3E3E3;
    float:left;
   }
   #sub2{
    border:1px dashed blue;
    background-color:#A3B4E6;
    float:left;
   }
  </style>
  <script language="javascript">
   function loadHandle(){
    //滚动div的高度为body的可见高度减去p1的可见高度即可(自适应的高度)
    document.getElementById("scrollDiv").style.height = document.body.clientHeight-document.getElementById("p1").clientHeight;
   }
  </script>
 </head>
 <!-- 注意把body的margin设为0 -->
 <body scroll="no" style="margin:0px;" onload="loadHandle()">
  <div id="p1">
   <div id="sub1">Hello<br>Jam</div>
   <div id="sub2">How do you do!</div>
   <div style="clear:both;margin:0px;"></div>
  </div>
  <div id="scrollDiv" style="overflow:auto;width:100%;background-color:#E3E3E3;">
   10<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>
   12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>
   12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>
   12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>
   12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>
   12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>
   12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>12<br>
   10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19
  </div>
 </body>
</html>