檬味博客 » 问答 » 如何用div实现页面上下部分固定，中间部分随滚动条移动而移动的代码

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

首先，我们需要定义一个包含整个页面内容的容器，这个容器应该设置为固定高度和宽度，并且启用垂直滚动条。这可以通过以下CSS代码实现：.content1 { overflow: hidden;overflow-y: scroll;SCROLLBAR-FACE-COLOR:#205e17;SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-3DLIGHT-COLOR:#205e17;SCROLLBAR-TRACK-...
如何用div实现页面上下部分固定，中间部分随滚动条移动而移动的代码
在网页设计中，有时需要实现页面上部和下部固定不动，而中间部分随滚动条滚动而上下移动的效果。这种布局可以通过使用HTML的元素和CSS样式来实现。下面是一个简单的示例，展示了如何使用CSS样式来达到这一效果。

首先，我们需要定义一个包含整个页面内容的容器，这个容器应该设置为固定高度和宽度，并且启用垂直滚动条。这可以通过以下CSS代码实现：

.content1 {

overflow: hidden;

overflow-y: scroll;

SCROLLBAR-FACE-COLOR:#205e17;

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;

}

接下来，在这个容器内放置两个固定位置的元素，分别代表页面的上部和下部。这两个部分不会随着页面滚动而移动，始终保持在原位置。

最后，将中间部分的内容放置在一个可滚动的元素中，这样它就可以随着页面滚动而上下移动。下面是一个完整的HTML和CSS代码示例：

<html>

<head><style>

.content1 {

overflow: hidden;

overflow-y: scroll;

SCROLLBAR-FACE-COLOR:#205e17;

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;

}

.top {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100px;

background-color: #ff0000;

}

.bottom {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

height: 100px;

background-color: #00ff00;

}

.middle {

position: relative;

top: 100px;

bottom: 100px;

overflow: auto;

height: 500px;

background-color: #0000ff;

}

</style></head>

<body>

<div class="content1">

<div class="top">固定顶部</div>

<div class="middle">可滚动内容</div>

<div class="bottom">固定底部</div>

</div>

</body>

</html>

通过这种方式，我们可以轻松地实现页面上部和下部固定，中间部分随滚动条滚动而上下移动的效果。2024-12-20
mengvlog 阅读 187 次 更新于 2025-09-07 19:20:13 我来答关注问题0
1 个回答檬味博客专题活动
  • 云南新华电脑学校 div怎样才能覆盖div上面的内容?

    这个用绝对定位就可以搞定了。position:absolute;举个例子：1.css代码 .div1{height:30px; width:100%; background:#fff; position:relative; z-index:1;}.div2{height:30px; width:100%; background:#f00; position:absolute; top:0px; left:0; z-index:2;} 2.html代码

  • 爱可生云数据库 CSS如何做到页面固定高度,header置顶footer固底page内容超过页面长度后可上下滚动。

    line-height:1500px;} 高度1500px顶部和底部高度5%；中间盒子高度90%，这样刚好100%，你内容填充到中间的盒子就行，如果需要特殊样式，顶部和底部可以用position定位，main盒子加上margin-top、...

  • 信必鑫服务平台 如何让div滚动时页面不跟着滚动?

    滚动条是容器所固有的，不管是外面的滚动条，还是里面的滚动条，只要让固定的div和body或者html容器脱离关系，即可实现DIV固定在页面而不随着滚动条随意滚动。1.html,body，将默认出现的滚动条，完全地隐藏，这样不管什么内容都不会出现了。2.virtual_body，写一个假的body，设置它的长宽为100%，这样利...

  • 猪八戒网 vue中左右滑动页面固定?

    3、在css标签内，再设置类名为ff的样式，设置其高宽都为100px，背景颜色为红色，使用position定位属性设置div在页面的绝对位置，距离页面顶部为20px，距离页面左边为0px，从而实现div悬浮在页面中。vue里app表格两列固定左右滚动效果首先将表格分成左右两部分，左边第一列在上下滑动是header部分需要固定；...

  • 哈喽刘海 Html 中的div标签怎么用,举例说明!

    标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。用法 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部