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

时间：2010-09-15 来源：qdl2010

在页面设计时，有时会碰到上边一小部分要固定（比如是一个动态生成的标题，高度不确定），而下边的具体内容则需要滚动显示的情形(在不使用框架集合的情况下)，今天自己试着写了一下，代码如下： <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.offsetHeight-document.getElementById("p1").offsetHeight;
 }
 </script>
</head>

<body scroll="no" style="margin:0px;" onload="loadHandle()">
 <div id="p1">
 <div id="sub1">Hello 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 12 12 12 12 12 12 12 12 12 
 12 12 12 12 12 12 12 12 12 12 
 12 12 12 12 12 12 12 12 12 12 
 12 12 12 12 12 12 12 12 12 12 
 12 12 12 12 12 12 12 12 12 12 
 12 12 12 12 12 12 12 12 12 12 
 12 12 12 12 12 12 12 12 12 12 
 10 11 12 13 14 15 16 17 18 19
 </div>
</body>
</html>

相关阅读更多 +