如何用div实现页面上下部分固定,中间部分随滚动条移动而移动的代码?

如题所述

代码详情如下,直接使用即可!

.content1{
overflow: hidden;
overflow-y:scroll;
SCROLLBAR-FACE-COLOR:#205e17;
SCROLLBAR-SHADOW-COLOR:#86ff92;
SCROLLBAR-SHADOW-COLOR:#86ff92;
SCROLLBAR-3DLIGHT-COLOR:#205e17;
SCROLLBAR-TRACK-COLOR:#205e17;
SCROLLBAR-DARKSHADOW-COLOR:#205e17;
SCROLLBAR-BASE-COLOR:#205e17;
SCROLLBAR-ARROW-COLOR:#86ff92;
height:700px;
width:748px;
}
中间的div就用下面的,样式是上面的。
<div class="content1">
<div>

温馨提示:内容为网友见解,仅供参考
第1个回答  2018-03-10

1、头部定义一个div,固定高度,设置绝对定位(position:absolute),设置上边距(top:0);

2、底部定义一个div,固定高度,设置绝对定位(position:absolute),设置下边距(bottom:0);

3、中间定义一个div,设置滚动条自动( overflow: auto); 设置绝对定位(position:absolute),设置top和bottom,top的值等于头部div的高度,bottom的值等于底部div的高度

示例

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#page{margin:0 auto;width:960px;}
#header{width:960px; height:60px; position:absolute; top:0;background-color:#ccc;}
#footer{width:960px; height:30px; position:absolute; bottom:0; background-color:#ccc;}
#content{width:960px; overflow: auto; position:absolute; top:60px; bottom:30px;}
</style>

</head>
<body>
<div id="page">
<div id="header">定义顶部</div>  
<div id="content">content定义中间</div>
<div id="footer">footer定义底部</div>
</div>
</body>


</html>

相似回答