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

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.mzph.cn/news/25961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何创建51单片机KEIL工程

如何创建51单片机KEIL工程步骤&#xff1a; &#xff08;1&#xff09;打开keil软件&#xff0c;点击工具栏-Project&#xff0c;选择创建新的工程&#xff1b; &#xff08;2&#xff09;然后给工程命名&#xff0c;文章以project为例&#xff0c;然后点击保存 &#xff08…

Jtti:Ubuntu静态IP地址怎么配置

在 Ubuntu 中配置静态 IP 地址需要编辑网络配置文件。以下是在 Ubuntu 20.04 版本中配置静态 IP 地址的步骤&#xff1a; 打开终端&#xff0c;以管理员身份登录或使用 sudo 权限。 使用以下命令打开网络配置文件进行编辑&#xff1a; sudo nano /etc/netplan/00-installer-…

【力扣】977. 有序数组的平方 <首尾指针>

【力扣】977. 有序数组的平方 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0,3,10] 输出&#xff1a;[0,1,9,16,100] 解释&#xff1a…

python:isdigit()、isalpha()、isalnum() 三个函数的区别和注意点

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 一、isdigit() python关于 isdigit() 内置函数的官方定义&#xff1a; S.isdigit() -> bool Return True if all characters in S are digitsand there is at least one character in S, False otherwise.翻…

最长连续序列 LeetCode热题100

题目 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 思路 哈希表&#xff08;unordered_set&#xff09;存数组&#xff0c;遍历哈…

nodejs环境部署

1.前言 前端的打包必须要使用nodejs环境 2.部署 下载安装包&#xff0c;在下面的路径中找到适合自己项目合适的版本在下载&#xff0c;可以问一下前端开发人员 路径&#xff1a;Index of /dist/ 我这里是下载了14.21.3版本的nodejs环境,上传到需要部署的主机中 mkdir /opt…

实时服务器监控

为 IT 基础架构建立适当的监控系统的重要性不容低估&#xff0c;管理员使用的监控解决方案可确保通过消除瓶颈和优化资源使用以获得最佳性能来充分发挥基础架构的潜力。 多年来&#xff0c;IT 基础架构变得越来越复杂&#xff0c;对网络监控的需求也随之增加&#xff0c;虽然网…

创建型模式-单例模式

文章目录 一、创建型模式1. 单例设计模式1.1 单例模式的结构1.2 单例模式的实现&#xff08;1&#xff09;饿汉式-方式1&#xff08;静态变量方式&#xff09;&#xff08;2&#xff09;饿汉式-方式2&#xff08;静态代码块方式&#xff09;&#xff08;3&#xff09;懒汉式-方…

Sql server 2005 卸载之后重新安装

Sql server 2005 卸载之后重新安装 Sql sercer 2005在重新安装之前先要进行卸载操作&#xff0c;由于Sql sercer 2005组件都是分散的&#xff0c;所以卸载时要找到对应的位置一个一个卸载&#xff0c;不卸载干净的情况下再次安装时会出现很多问题&#xff0c;导致安装失败。这…

python编写ocr识别图片汉字

当你需要构建一个简单的图形用户界面&#xff08;GUI&#xff09;应用程序&#xff0c;并在其中实现光学字符识别&#xff08;OCR&#xff09;功能时&#xff0c;wxPython是一个强大而灵活的选择。wxPython是一个基于Python的跨平台GUI开发框架&#xff0c;结合了wxWidgets C库…

matlab使用教程(10)—脚本和函数

1.概述 MATLAB 提供了一个强大的编程语言和交互式计算环境。您可以使用此语言在 MATLAB 命令行中一次输入一个命令&#xff0c;也可以向某个文件写入一系列命令&#xff0c;按照执行任何 MATLAB 函数的相同方式来执行这些命令。使用 MATLAB 编辑器或任何其他文件编辑器可以创建…

Linux各目录详解

Linux文件系统是一个树状结构&#xff0c;由多个目录&#xff08;或文件夹&#xff09;组成。以下是常见的Linux目录及其功能的详细解释&#xff1a; /&#xff08;根目录&#xff09;&#xff1a;在Linux文件系统中&#xff0c;所有其他目录和文件都是从根目录派生的。所有的存…

【源码分析】Nacos如何使用AP协议完成服务端之间的数据同步?

AP节点的同步使用的是异步任务消息队列的方式来实现的。 取出任务之后将会放入到一个List集合中。 然后会发现任务的执行是由条件的。 首先是当前集群的节点数量等于1000&#xff0c;那么此时会直接开始同步&#xff0c;当然这个条件在小项目中不会成立&#xff0c;所以还有…

无人车沿着指定线路自动驾驶与远程控制的实践应用

有了前面颜色识别跟踪的基础之后&#xff0c;我们就可以设定颜色路径&#xff0c;让无人车沿着指定线路做自动驾驶了&#xff0c;视频&#xff1a;PID控制无人车自动驾驶 有了前几章的知识铺垫&#xff0c;就比较简单了&#xff0c;也是属于颜色识别的一种应用&#xff0c;主要…

微信小程序阻止用户返回上一页,并弹窗给用户确定是否要返回上一页

在onload中调用微信的enableAlertBeforeUnload方法&#xff0c;在首次进入会自动监听当前的页面&#xff0c;在返回的时候会自动弹出弹窗阻止用户返回上一页&#xff0c;点击确定则返回上一页&#xff0c;取消则停留在当前页 onLoad: function(){wx.enableAlertBeforeUnload({…

如何在业务中体现TCC事务模型?

在分布式系统设计中&#xff0c;随着微服务的流行&#xff0c;通常一个业务操作被拆分为多个子任务&#xff0c;比如电商系统的下单和支付操作&#xff0c;就涉及到了创建和更新订单、扣减账户余额、扣减库存、发送物流消息等&#xff0c;那么在复杂业务开发中&#xff0c;如何…

关于丢失安卓秘钥的撞sha-1值的办法

实验得知&#xff0c;安卓sha-1和keytool生成秘钥签名文件的时间有关。 前提条件是&#xff0c;开发者必须知道生成秘钥的所有细节参数 以下是撞文件代码&#xff08;重复生成&#xff09; import time import osidx 0while True:cmdkeytool -keyalg RSA -genkeypair -alia…

比特鹏哥-数据类型和变量【自用笔记】

这里写目录标题 1.数据类型介绍字符&#xff0c;整型&#xff0c;浮点型&#xff0c;布尔类型 2.signed 和unsigned3.数据类型的取值范围sizeof 展示字节大小--- 计算机中单位&#xff1a;字节 4.变量 常量4.1 变量创建变量&#xff08;数据类型 变量名&#xff09;创建变量的时…

【Rust 基础篇】Rust Sized Trait:理解Sized Trait与动态大小类型

导言 Rust是一门以安全性和性能著称的系统级编程语言。在Rust中&#xff0c;类型大小的确定在编译期是非常重要的。然而&#xff0c;有些类型的大小在编译期是无法确定的&#xff0c;这就涉及到了Rust中的动态大小类型&#xff08;DST&#xff09;。为了保证在编译期可以确定类…

【Spring Cloud 七】Sleuth+Zipkin 链路追踪

Sleuth链路追踪 系列博客背景一、 什么是链路追踪二、为什么要有链路追踪三、Sleuth与ZipkinSleuthZipkinSleuth和Zipkin的关系是什么&#xff1f; 四、使用Sleuthzipkin进行链路追踪4.1下载zipkin4.2案例说明项目代码服务提供者pom文件yml配置文件项目启动类controller 抽离出…