檬味博客 » 问答 » 如何用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 阅读 8 次 更新于 2025-07-19 05:03:38 我来答关注问题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代码

  • yanqing1987071 在css+div网页布局中怎么实现一行文字的宽度和高度固

    在css+div网页布局中怎么实现一行文字的宽度和高度固定 代码意思：width:设置DIV的宽度强制100px;overflow设置当文字超出DIV宽度时隐藏;white-space设置文字在一行，强制不换行;它还有其它属性自己百度;...

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

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

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

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

  • 析闲平湛蓝 DIV+CSS页面布局?

    上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的 说明：设置或检索对象的内容块固有的书写方向。西方语言确省的是左-右，上-下的书写方式。但是亚洲语言...

其他CSS类似问题

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

CSS相关话题

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