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

上下蓝色部门始终固定,中间灰色部分可以随浏览器滚动条上下移动。中间灰色部分的内容会随着滚动条的上下移动至上蓝色后边。... 上下蓝色部门始终固定,中间灰色部分可以随浏览器滚动条上下移动 。中间灰色部分的内容会随着滚动条的上下移动至上蓝色后边。 展开
 我来答
woshidaniel
推荐于2017-09-22 · TA获得超过9240个赞
知道小有建树答主
回答量:1760
采纳率:96%
帮助的人:953万
展开全部

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>
我的第七街
2018-03-30 · TA获得超过3304个赞
知道小有建树答主
回答量:13
采纳率:0%
帮助的人:5040
展开全部

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

.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>

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
廿2004
推荐于2017-10-12 · 超过13用户采纳过TA的回答
知道答主
回答量:50
采纳率:0%
帮助的人:21.9万
展开全部
.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>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
静静然507
2014-12-23 · TA获得超过203个赞
知道小有建树答主
回答量:210
采纳率:0%
帮助的人:201万
展开全部
div设置成{position:fixed;}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式