如何用div实现页面上下部分固定，中间部分随滚动条移动而移动的代码
上下蓝色部门始终固定，中间灰色部分可以随浏览器滚动条上下移动。中间灰色部分的内容会随着滚动条的上下移动至上蓝色后边。...
上下蓝色部门始终固定，中间灰色部分可以随浏览器滚动条上下移动 。中间灰色部分的内容会随着滚动条的上下移动至上蓝色后边。
展开
4个回答
展开全部
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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码详情如下，直接使用即可！
.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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.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>
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>
本回答被提问者和网友采纳
已赞过
已踩过<
你对这个回答的评价是？
展开全部
div设置成{position:fixed;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
