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>
相关文章：
css position: sticky；实现上下粘性布局，中间区域滚动
sticky主要解决的问题 1、使用absolute和fixed中间区域需要定义高度2、使用absolute和fixed底部需要写padding-bottom 避免列表被遮挡住一部分（底部是浮窗的时候，需要动态的现实隐藏） <!DOCTYPE html> <html lang"en"&…...
解密HTTP代理爬虫中的IP代理选择与管理策略
在当今数据驱动的世界中，HTTP代理爬虫作为一项重要的数据采集工具，其成功与否往往取决于IP代理的选择与管理策略。作为一家专业的HTTP代理产品供应商，我们深知IP代理在数据采集中的重要性。在本文中，我们将分享一些关于HTTP代理爬…...
pytorch入门
详细安装教程和环境配置可以看：Python深度学习：安装Anaconda、PyTorch（GPU版）库与PyCharm_哔哩哔哩_bilibili 跟学课程：B站我是土堆 pytorch中两个实用函数： dir()：打开 help():说明书…...
Redis | 主从模式
Redis | 主从模式 1. 简介 Redis主从模式（Replication）是Redis提供的一种数据备份和高可用性解决方案。通过主从复制，可以将一个Redis服务器的数据复制到其他多个从服务器，从而实现数据的备份和读写分离，提高系统的性…...
C# Blazor 学习笔记(8):row/col布局开发
文章目录 前言相关文章代码row和col组件B_rowB_col结构 使用 前言 可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善，所以很多组件要我们自己写。 我们对组件的要求是 我们在组件化一共…...
金融供应链智能合约 -- 智能合约实例
前提 Ownable:监管者合约,有一个函数能转让监管者。 SupplyChainFin:供应链金融合约,银行、公司信息上链，公司和银行之间的转账。 发票：记录者交易双方和交易金额等的一种记录数据。如:我在超市买了一瓶水,超市给我开了一张发票。 Ownable // SPDX-…...
论文《Contrastive Meta Learning with Behavior Multiplicity for Recommendation》阅读
论文《Contrastive Meta Learning with Behavior Multiplicity for Recommendation》阅读 论文概况论文主要贡献Background & Motivation方法论单行为图神经网络（Behavior-aware GNN）多行为对比学习元对比编码模型训练 实验部分论文总结 论文概况 今…...
K8S 部署 RocketMQ
文章目录 添加模板部署本地访问 集群使用 kubesphere 作为工具 添加模板 添加 helm 模板 helm repo add rocketmq-repo https://helm-charts.itboon.top/rocketmq helm repo update rocketmq-repo编写 value.yaml 文件 配置主从节点的个数，例子为单节点 broker:…...
[Docker]入门之docker-compose
一，Docker-compose简介 1，Docker-compose简介 Docker-Compose项目是Docker官方的开源项目，负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层，分别是工程（project），…...
SAP ABAP中使用函数ALSM_EXCEL_TO_INTERNAL_TABLE读取EXCEL中不同的SHEET数据
SAP提供了标准的读取EXCEL的函数（ALSM_EXCEL_TO_INTERNAL_TABLE），但是此标准函数无法满足对同一EXCEL 进行不同SHEET的数据读取，一下方法就是教你如何通过修改程序来实现ALSM_EXCEL_TO_INTERNAL_TABLE读取多个SHEET； …...
Rust 编程小技巧摘选(6)
目录 Rust 编程小技巧(6) 1. 打印字符串 2. 重复打印字串 3. 自定义函数 4. 遍历动态数组 5. 遍历二维数组 6. 同时遍历索引和值 7. 迭代器方法的区别 8. for_each() 用法 9. 分离奇数和偶数 10. 判断素数（质数） Rust 编程小技巧(6) 1. 打印…...
如何保证Redis缓存和数据库的一致性问题
熟练掌握Redis缓存技术？ 那么请问Redis缓存中有几种读写策略，又是如何保证与数据库的一致性问题 今天来聊一聊常用的三种缓存读写策略 Cache Aside Pattern Cache Aside Pattern 是我们平时使用比较多的一个缓存读写模式，比较适合读请求比…...
【数据分析入门】人工智能、数据分析和深度学习是什么关系？如何快速入门 Python Pandas？
目录 一、前言二、数据分析和深度学习的区别三、人工智能四、深度学习五、Pandas六、Pandas数据结构6.1 Series - 序列6.2 DataFrame - 数据框 七、输入、输出7.1 读取/写入CSV7.2 读取/写入Excel7.3 读取和写入 SQL 查询及数据库表 八、调用帮助九、选择(这里可以参考上一篇文…...
JavaScript 里三个点 ... 的用法
// table表头数据let tableHeadData deepClone(data);let tableCacheData [];//表格缓存对比if (!parent && isCacheHeadData) {// 缓存数据keylet tableCacheKey ${window.location.pathname}-${$self.attr(id)}if (localStorage.getItem(tableCacheKey)) {//根据缓…...
Linux修改系统语言
sudo dpkg-reconfigure locales 按pagedown键，移动红色光标到 zh_CN.UTF-8 UTF-8，空格标记*号（没标记下一页没有这一项），回车。 下一页选择 zh_CN.UTF-8。 如果找不到 dpkg-reconfigure whereis dpkg-reconfigure …...
Spring注解开发
目录 1、简介 2、原始注解 2.1、注解种类 2.2、组件扫描 2.3、具体使用 2.3.1、xml配置 2.3.2、注解配置 3、⭐新注解 3.1、新注解种类 3.2、实践 3.3、运行结果 3.4、警告信息 1、简介 Spring框架提供了许多注解，用于在Java类中进行配置和标记…...
图像处理库（Opencv, Matplotlib, PIL）以及三者之间的转换
文章目录 1. Opencv2. Matplotlib3. PIL4. 三者的区别和相互转换5. Torchvision 中的相关转换库5.1 ToPILImage([mode])5.2 ToTensor5.3 PILToTensor 1. Opencv opencv的基本图像类型可以和numpy数组相互转化，因此可以直接调用torch.from_numpy(img) 将图像转换成t…...
html+Vue+封装axios实现发送请求
在html中使用Vue和Axios时，可以在HTML中引入Vue库和Axios库，然后使用Vue的语法和指令来创建Vue组件和模板。在Vue组件中，你可以使用Axios发送HTTP请求来获取数据，并将数据绑定到Vue模板中进行展示。 <template><div>&…...
GoogLeNet卷积神经网络输出数据形参分析-笔记
GoogLeNet卷积神经网络输出数据形参分析-笔记 分析结果为： 输入数据形状:[10, 3, 224, 224] 最后输出结果：linear_0 [10, 1] [1024, 1] [1] 子空间执行逻辑 def forward_old(self, x):# 支路1只包含一个1x1卷积p1 F.relu(self.p1_1(x))# 支路2包含 1…...
【docker】dockerfile发布springboot项目
目录 一、实现步骤二、示例 一、实现步骤 1.定义父镜像：FROM java:8 2.定义作者信息：MAINTAINER：learn_docker<https://www.docker.com> 3.将jar包添加到容器：ADD jar包名称.jar app.jar 4.定义容器启动执行命令：…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...