css 将div固定在页面顶部不随页面滑动

为了将一个 div 设置为固定在页面顶部,并且高度为 5rem,宽度为 100vw,不随页面滚动,可以使用几种不同的 CSS 技术来实现。下面我将列举几种常见的方法:

1. 使用 position: fixed

最直接的方法是使用 position: fixed,这使得元素相对于视口(浏览器窗口)定位,而不是相对于其包含元素:

css 复制代码
.div-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 5rem;
  background-color: #f4f4f4; /* 示例背景色 */
  z-index: 1000; /* 确保 div 在页面顶层 */
}

2. 使用 position: sticky

position: sticky 可以使元素在页面滚动到某个点之前表现得像 position: relative,之后表现得像 position: fixed。这里,我们可以让它一直处于顶部:

css 复制代码
.div-sticky {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 5rem;
  background-color: #f4f4f4;
  z-index: 1000;
}

请注意,position: sticky 可能在某些较老的浏览器中不受支持。

3. 使用 Flexbox 或 Grid 布局(视口高度固定时)

如果整个页面的布局是基于 Flexbox 或 Grid,你也可以使顶部 div 固定,而其他内容滚动:

Flexbox 示例:
css 复制代码
.body-flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.div-flex-header {
  flex: 0 0 5rem; /* flex-grow, flex-shrink, flex-basis */
  width: 100vw;
  background-color: #f4f4f4;
}

.content-flex {
  flex: 1;
  overflow-y: auto; /* 只让内容部分滚动 */
}
HTML 结构:
html 复制代码
<div class="body-flex">
  <div class="div-flex-header">Header</div>
  <div class="content-flex">Content scrolls here</div>
</div>

4. 使用 CSS Grid 布局

类似于 Flexbox,但使用 CSS Grid:

css 复制代码
.body-grid {
  display: grid;
  grid-template-rows: 5rem auto;
  height: 100vh;
}

.div-grid-header {
  grid-row: 1 / 2;
  width: 100vw;
  background-color: #f4f4f4;
}

.content-grid {
  grid-row: 2 / 3;
  overflow-y: auto; /* 只让内容部分滚动 */
}
HTML 结构:
html 复制代码
<div class="body-grid">
  <div class="div-grid-header">Header</div>
  <div class="content-grid">Content scrolls here</div>
</div>

以上每种方法都有其用途和场合,可以根据你的具体需求和页面的其他布局需求来选择最适合的方法。 position: fixed 是最直接的方法,而 Flexbox 和 Grid 提供了更复杂的布局可能性,尤其是在需要与页面其他元素紧密布局时。

相关推荐
翻滚吧键盘7 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。26 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟2 小时前
用Sass循环实现炫彩文字跑马灯效果
前端