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

最新推荐文章于 2024-07-16 15:35:21 发布

lcathm

最新推荐文章于 2024-07-16 15:35:21 发布

阅读量4.7k

点赞数

分类专栏： html

html 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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 scroll="no" style="margin:0px;" οnlοad="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>

lcathm

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML页面上面固定下面滚动的实现

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

扫一扫

专栏目录