您的位置：首页 > Web前端 > HTML

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

2014-12-15 20:55 120 查看

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;" 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航