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.mfbz.cn/a/62849.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

初学者自学python哪本书好,python教程自学全套

初学者自学python哪本书好,python教程自学全套

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python怎么自学,可以达到什么程度&#xff0c;初学者自学python哪本书好&#xff0c;现在让我们一起来看看吧&#xff01; 前言 Python是一个非常适合自学&#xff0c;0基础的话从入门到精通也只需要花3-4个月PYTHON库“…
阅读更多...
Arch Linux 使用桥接模式上网

Arch Linux 使用桥接模式上网

如果我们想要将虚拟机与物理主机同一网段&#xff0c;并且像物理机器一样被其他设备访问&#xff0c;则需要以桥接模式上网&#xff0c;这个时候&#xff0c;物理主机就必须配置为使用网桥上网了。 注意&#xff1a;这里我们使用了 NetworkManager 网络管理工具中的 nmcli 来进…
阅读更多...
虚拟机重启网络服务失败 Failed to start LSB:Bring up/down networking.

虚拟机重启网络服务失败 Failed to start LSB:Bring up/down networking.

许久没有打开虚拟机了&#xff0c;今天一开打发现无法ping通网络 使用 ip addr 也获取不到ip信息 重启网络服务提示我 使用 systemctl status network.service 命令查看 出现以下报错 百度各种解决方案无效&#xff0c;才发现我为了加快电脑开机速度&#xff0c;把虚拟机的一些…
阅读更多...
【源码分析】Nacos服务端如何更新以及保存注册表信息？

【源码分析】Nacos服务端如何更新以及保存注册表信息？

文章目录 我们知道服务注册到Nacos之后&#xff0c;Nacos是需要对这些服务实例信息进行保存的&#xff0c;那么Nacos是如何保存的呢&#xff1f; 首先我们先分析Nacos的注册表的结构。 我们知道Nacos有namespace&#xff0c;group&#xff0c;cluster三个分级&#xff0c;他们都…
阅读更多...
Llama 2 with langchain项目详解（一）

Llama 2 with langchain项目详解（一）

Llama 2 with langchain项目详解（一） 2023年2月25日，美国Meta公司发布了Llama 1开源大模型。随后，于2023年7月18日，Meta公司发布了Llama 2开源大模型，该系列包括了70亿、130亿和700亿等不同参数规模的模型。相较于Llama 1，Llama 2的训练数据增加了40%，上下文长度提升至…
阅读更多...
uniapp 返回上一页并刷新

uniapp 返回上一页并刷新

如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息&#xff0c;点击保存后跳转到个人中心&#xff08;/pages/mine/index&#xff09;页面并刷新更新数据 点击保存按钮时执行以下代码&#xff1a; wx.switchTab({url: /pages/mine/index }) // 页面重载 let pages …
阅读更多...
出现Error: Cannot find module ‘compression-webpack-plugin‘错误

出现Error: Cannot find module ‘compression-webpack-plugin‘错误

错误&#xff1a; 解决&#xff1a;npm install --save-dev compression-webpack-plugin1.1.12 版本问题
阅读更多...
powerdesigner各种字体设置；preview字体设置；sql字体设置

powerdesigner各种字体设置；preview字体设置；sql字体设置

1.设置左侧菜单&#xff1a; 步骤如下&#xff1a; tools —> general options —> fonts —> defalut UI font ,选择字体样式及大小即可&#xff0c;同下图。 2.设置preview字体大小&#xff08;sql预览&#xff09; 步骤如下&#xff1a; tools —> general o…
阅读更多...
无涯教程-Perl - chop函数

无涯教程-Perl - chop函数

描述 此函数从EXPR,LIST的每个元素或$_(如果未指定值)中删除最后一个字符。 语法 以下是此函数的简单语法- chop VARIABLEchop( LIST )chop返回值 此函数返回从EXPR中删除的字符,并且在列表context中,从LIST的最后一个元素中删除该字符。 例 以下是显示其基本用法的示例…
阅读更多...
汽配企业如何利用MES管理系统解决生产防错难题

汽配企业如何利用MES管理系统解决生产防错难题

汽车配件制造业是一个高效率、低成本、高质量的生产领域&#xff0c;但同时也面临着一系列的挑战。其中最为突出的挑战之一是如何在生产过程中避免错误&#xff0c;提高产品的合格率。本文将介绍汽车配件的制造特点以及如何通过MES管理系统解决方案实现生产防错&#xff0c;从而…
阅读更多...
高中生python零基础怎么学,python高中生自学行吗

高中生python零基础怎么学,python高中生自学行吗

这篇文章主要介绍了高中学历学python好找工作吗&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。 学习python的第九天 根据我们前面这几天的学习&#xff0c;我们掌握了Python的…
阅读更多...
检查网站是HTTP那种协议与获取域名的ipv6地址

检查网站是HTTP那种协议与获取域名的ipv6地址

前言 最近在做HTTPS的应用&#xff0c;可能需要使用ipv6的地址做SLB&#xff0c;但是怎么检查配置正确&#xff0c;总不能每次都看日志吧&#xff0c;实际上客户端也很容易查看&#xff0c;总结工作经验。 检查HTTP协议版本 笔者想到了使用浏览器方式&#xff0c;或者抓包&a…
阅读更多...
docker中的jenkins去配置sonarQube

docker中的jenkins去配置sonarQube

docker中的jenkins去配置sonarQube 1、拉取sonarQube macdeMacBook-Pro:~ mac$ docker pull sonarqube:8.9.6-community 8.9.6-community: Pulling from library/sonarqube 8572bc8fb8a3: Pull complete 702f1610d53e: Pull complete 8c951e69c28d: Pull complete f95e4f8…
阅读更多...
React Dva 操作models中的subscriptions讲述监听

React Dva 操作models中的subscriptions讲述监听

接下来 我们来看一个models的属性 之前没有讲到的subscriptions 我们可以在自己有引入的任意一个models文件中这样写 subscriptions: {setup({ dispatch, history }) {console.log(dispatch);}, },这样 一进来 这个位置就会触发 这里 我们可以写多个 subscriptions: {setup…
阅读更多...
opencv基础-29 Otsu 处理(图像分割)

opencv基础-29 Otsu 处理(图像分割)

Otsu 处理 Otsu 处理是一种用于图像分割的方法&#xff0c;旨在自动找到一个阈值&#xff0c;将图像分成两个类别&#xff1a;前景和背景。这种方法最初由日本学者大津展之&#xff08;Nobuyuki Otsu&#xff09;在 1979 年提出 在 Otsu 处理中&#xff0c;我们通过最小化类别内…
阅读更多...
11. Redis基础知识

11. Redis基础知识

文章目录 一、概述二、数据类型STRINGLISTSETHASHZSET 三、数据结构字典跳跃表 四、使用场景计数器缓存查找表消息队列会话缓存分布式锁实现其它 五、Redis 与 Memcached数据类型数据持久化分布式内存管理机制 六、键的过期时间七、数据淘汰策略八、持久化RDB 持久化AOF 持久化…
阅读更多...
AcWing 379. 捉迷藏（最小路径点覆盖匈牙利算法）

AcWing 379. 捉迷藏（最小路径点覆盖匈牙利算法）

输入样例&#xff1a; 7 5 1 2 3 2 2 4 4 5 4 6输出样例&#xff1a; 3 #include<bits/stdc.h> using namespace std; typedef long long ll; const int N220; int n,m,t; int d[N][N],vis[N]; int match[N]; bool find(int x){for(int i1;i<n;i){if(d[x][i]&&…
阅读更多...
react icon ant简单使用

react icon ant简单使用

refer&#xff1a; 文字提示 Tooltip - Ant Design 1.首先保证已经引入了Ant 2.在组件&#xff08;页面&#xff09;引入tooltip import { Form, Tooltip } from antd; 3.在合适的位置使用tooltip&#xff1a; <span>寿命 <Tooltip title"这是寿命的说明&quo…
阅读更多...
java.lang.UnsupportedClassVersionError TestCase

java.lang.UnsupportedClassVersionError TestCase

JavaFramework-JDK6.jar 放到JDK17运行没有问题 JavaFramework源码放到JDK17环境下编译出来的JavaFramework-JDK17.jar JavaFramework-JDK17.jar 放到JDK17运行没有问题 JavaFramework-JDK17.jar 放到JDK8运行没有问题&#xff0c;这个好像不对啊&#xff0c;可能之前编译设置…
阅读更多...
数组根据属性去重

数组根据属性去重

利用reduce函数处理&#xff0c;直接上代码&#xff01; let data [{name:晓明,id:1},{name:德华,id:2},{name:德华,id:2},{name:晓明,id:1},] var obj {}; let arr data.reduce(function (item, next) {obj[next.id] ? : obj[next.id] true && item.push(next)…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站