css position: sticky；实现上下粘性布局，中间区域滚动

news2025/1/15 16:30:44

sticky主要解决的问题

  • 1、使用absolute和fixed中间区域需要定义高度
  • 2、使用absolute和fixed底部需要写padding-bottom 避免列表被遮挡住一部分（底部是浮窗的时候，需要动态的现实隐藏）
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap{
      display: flex;
      flex-direction: column;
    }
    header{
      height: 100px;
      background-color: red;
      position: sticky;
      top:0;
    }
    ul{
      flex:1;
    }
    li{
      height: 100px;
      margin-bottom: 18px;
      background-color: pink;
    }
    footer{
      position: sticky;
      bottom: 0;
      height: 100px;
      background: blue;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      头部
    </header>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1444</li>
    </ul>
    <footer>底部</footer>
  </div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/822608.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

从0-1实现简易Raft分布式共识算法

从0-1实现简易Raft分布式共识算法

一、Raft前置简介 Raft目前是最著名的分布式共识性算法&#xff0c;被广泛的应用在各种分布式框架、组件中&#xff0c;如Redis、RocketMq、Kafka、Nacos&#xff08;CP&#xff09;等 根据Raft论文&#xff0c;可将Raft拆分为如下4个功能模块&#xff1a; 领导者选举日志同…
阅读更多...
蓝桥云课ROS机器人旧版实验报告-04三维建模与仿真

蓝桥云课ROS机器人旧版实验报告-04三维建模与仿真

项目名称 实验四 3D建模与仿真 成绩 内容&#xff1a;自定义机器人3D模型&#xff0c;创建一个URDF文件、xacro文件、ROS2[Kinetic/Melodic/Noetic]仿真 实验记录&#xff08;70分&#xff09; 从头开始构建使用 URDF 的可视化机器人模型&#xff1a; 先尝试两个案例&a…
阅读更多...
合合信息上会在即：“排队”耗时近两年，能否交出IPO答卷？

合合信息上会在即：“排队”耗时近两年，能否交出IPO答卷？

撰稿|行星 来源|贝多财经 近日&#xff0c;上海合合信息科技股份有限公司&#xff08;下称“合合信息”&#xff09;在上海证券交易所科创板递交招股书&#xff08;上会稿&#xff09;。据贝多财经了解&#xff0c;合合信息于2021年9月27日递交招股书&#xff0c;将于2023年8…
阅读更多...
今日头条面试真题及答案，软件测试工程师面试秘籍

今日头条面试真题及答案，软件测试工程师面试秘籍

试题1&#xff0e;在浏览器地址栏里输入一个网址&#xff0c;接下来会发生什么&#xff1f; 答案&#xff1a;发生的操作如下。 &#xff08;1&#xff09;浏览器查找该网址的IP地址。 &#xff08;2&#xff09;浏览器根据解析得到的IP地址向Web服务器发送一个HTTP请求。 &am…
阅读更多...
CFI技术新探索，struct_san今日登场

CFI技术新探索，struct_san今日登场

一、背景 C/C开发的应用程序&#xff0c;长久以来存在内存破坏类的安全问题。当攻击者掌握了目标程序的漏洞后&#xff0c;就可以开发漏洞利用程序劫持目标程序的控制流。早期的漏洞利用是采用代码注入的方式&#xff0c;通过在缓冲区置入一段代码&#xff08;shellcode&#…
阅读更多...
在 Tinkercad 中加快设计的 22 个技巧

在 Tinkercad 中加快设计的 22 个技巧

在 Tinkercad 中加快设计的 22 个技巧 原文 Everyone knows that Tinkercad is the easiest way to get started in 3D design. Once you get the hang of it, you realize that it’s one of the fastest design tools available. With no software to launch or complex me…
阅读更多...
Pytest学习教程_测试报告生成pytest-html（三）

Pytest学习教程_测试报告生成pytest-html（三）

前言 pytest-html 是一个用于生成漂亮的 HTML 测试报告的 pytest 插件。它可以方便地将 pytest 运行的测试结果转换为易于阅读和理解的 HTML 报告&#xff0c;提供了丰富的测试结果展示功能和交互性。 一、安装 # 版本查看命令 pytest版本&#xff1a; pytest --version pyte…
阅读更多...
PHP代码审计--理论

PHP代码审计--理论

提供资料&#xff1a; php 基础 : https://www.runoob.com/php/php-tutorial.html php是什么&#xff1f; PHP 是服务器端脚本语言。 首先在学习PHP前需要对HTML 和CSS有一定的认识 PHP 能做什么&#xff1f; PHP 可以生成动态页面内容PHP 可以创建、打开、读取、写入、关…
阅读更多...
InnoDB引擎底层逻辑讲解——架构之磁盘架构

InnoDB引擎底层逻辑讲解——架构之磁盘架构

1. System Tablespaces区域 系统表空间是change buffer&#xff08;更改缓冲区&#xff09;的存放区域&#xff0c;这是在8.0之后重新规划的&#xff0c;在5.x版本的时候&#xff0c;系统表空间还会存放innodb的数据字典undolog日志等信息&#xff0c;在8.0之后主要主要存放更…
阅读更多...
【程序猿周末如何才能获得充分的休息】

【程序猿周末如何才能获得充分的休息】

工作以后常常容易感到疲于奔命&#xff0c;即使在周末也没有得到高质量的休息。打工人/学生党如何过周末&#xff1f;你有哪些延长周末和下班时间的好方法吗&#xff1f;你可以选择从以下几个方向谈谈你的想法和观点。 一&#xff1a;周末的时间规划 周末双休 二&#xff1a;提…
阅读更多...
springboot 自定义starter项目Unable to read meta-data for class

springboot 自定义starter项目Unable to read meta-data for class

springboot 自定义starter包&#xff0c;在项目中引用&#xff0c;启动报错。 org.springframework.boot.SpringApplication [SpringApplication.java:843] Application run failed java.lang.IllegalStateException: Unable to read meta-data for class com.hxg.mail.spring…
阅读更多...
找好听的配乐、BGM就上这6个网站，免费商用。

找好听的配乐、BGM就上这6个网站，免费商用。

推荐几个音乐素材网站给你&#xff0c;各种类似、风格的都有&#xff0c;而且免费下载&#xff0c;还可以商用&#xff0c;建议收藏起来~ 菜鸟图库 https://www.sucai999.com/audio.html?vNTYxMjky 站内有上千首音效素材&#xff0c;网络流行的音效素材这里都能找到&#xf…
阅读更多...
一起学算法（双指针篇）

一起学算法（双指针篇）

概念&#xff1a; 通过两个指针&#xff0c;不断的调整区间&#xff0c;从而求出问题最优解的算法就叫“尺取法”&#xff0c;由于利用的是两个双指针&#xff0c;所以也叫作“双指针”算法&#xff0c;这里的“尺”的含义&#xff0c;主要是因为这类问题&#xff0c;最终要求解…
阅读更多...
刷题笔记 day2

刷题笔记 day2

力扣 1089 复写零 思路&#xff1a;双指针 第一步&#xff1a;利用指针 cur 去记录最后一位要复写的数 &#xff0c; 利用指针 dest 指向最后一位数所要复写的位置&#xff1b; 实现过程&#xff1a;最开始 cur 指向0&#xff0c;dest 指向 -1 &#xff0c; 当arr[cur] ! …
阅读更多...
高并发与性能优化的神奇之旅

高并发与性能优化的神奇之旅

作为公司的架构师或者程序员&#xff0c;你是否曾经为公司的系统在面对高并发和性能瓶颈时感到手足无措或者焦头烂额呢&#xff1f;笔者在出道那会为此是吃尽了苦头的&#xff0c;不过也得感谢这段苦&#xff0c;让笔者从头到尾去探索&#xff0c;找寻解决之法。 目录 第一站&…
阅读更多...
深入理解设计模式之模板方法模式

深入理解设计模式之模板方法模式

深入理解设计模式之模板方法模式 什么是模板方法模式&#xff1f; 模板方法模式是一种行为型设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步骤的具体实现延迟到子类中。模板方法模式通过将算法的通用部分抽象出来&#xff0c;以模板方法的形式提供给子类&am…
阅读更多...
express学习笔记7 - docker跟mysql篇

express学习笔记7 - docker跟mysql篇

安装Docker和Navicat Docker 进官⽹https://docs.docker.com/get-docker/ 选择机型安装即可。 Navicat&#xff08;也可以在网上找个破解版本&#xff09; 进官⽹https://www.navicat.com/en/products/navicat-premium 安装完之后连接新建⼀个数据库连接 然后再⾥⾯新建⼀个数…
阅读更多...
【编程语言 · C语言 · 通讯录管理系统】

【编程语言 · C语言 · 通讯录管理系统】

【编程语言 C语言 通讯录管理系统】https://mp.weixin.qq.com/s?__bizMzg4NTE5MDAzOA&mid2247491539&idx1&sn02173f15bbff6d5f01a3426a1ecf7120&chksmcfade32af8da6a3cb187ecde99fe0519c4d67ef05488754ab2196fab0915262c260ccc68b304&payreadticketHEsQ…
阅读更多...
MacOS使用brew如何下载Nginx

MacOS使用brew如何下载Nginx

首先&#xff0c;第一步切换源&#xff1a; 切换 brew.git 仓库地址&#xff1a; cd "$(brew --repo)" git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git 替换 homebrew-core.git 仓库地址: cd "$(brew --repo)/Library/Taps/home…
阅读更多...
无线蓝牙耳机有什么值得耳机买的？几款值得买的口碑品牌盘点

无线蓝牙耳机有什么值得耳机买的？几款值得买的口碑品牌盘点

蓝牙耳机是一种无线耳机&#xff0c;其通过蓝牙技术与其他设备进行连接&#xff0c;例如手机、电脑、平板电脑等。蓝牙耳机使得用户可以在不受线缆限制的情况下享受音频体验&#xff0c;而且还可以方便地进行通话&#xff0c;目前市场上有许多不同种类和品牌的蓝牙耳机&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023