当前位置： 首页 > news >正文

【一看就会】实现仿京东移动端页面滚动条布局

news 2025/10/30 12:57:49

简单粗暴直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    * {

      padding: 0;

      margin: 0;

      list-style: none;

    }

    .box {

      width: 100vw;

      height: 100vh;

      display: flex;

      flex-direction: column;

    }

    header {

      background-color: pink;

      height: 60px;

    }

    main {

      flex: 1;

      background-color: yellowgreen;

      overflow: hidden;

      display: flex;

    }

    footer {

      background-color: skyblue;

      height: 60px;

    }

  </style>

</head>

<body>

  <div class="box">

    <header>头部</header>

    <main>

      <div style="width: 100px; height: 100%; overflow: auto;margin-right: 20px;">

        <ul>

          <li>这是第1个li</li>

          <li>这是第2个li</li>

          <li>这是第3个li</li>

          <li>这是第4个li</li>

          <li>这是第5个li</li>

          <li>这是第6个li</li>

          <li>这是第7个li</li>

          <li>这是第8个li</li>

          <li>这是第9个li</li>

          <li>这是第10个li</li>

          <li>这是第11个li</li>

          <li>这是第12个li</li>

          <li>这是第13个li</li>

          <li>这是第14个li</li>

          <li>这是第15个li</li>

          <li>这是第16个li</li>

          <li>这是第17个li</li>

          <li>这是第18个li</li>

          <li>这是第19个li</li>

          <li>这是第20个li</li>

          <li>这是第21个li</li>

          <li>这是第22个li</li>

          <li>这是第23个li</li>

          <li>这是第24个li</li>

          <li>这是第25个li</li>

          <li>这是第26个li</li>

          <li>这是第27个li</li>

          <li>这是第28个li</li>

          <li>这是第29个li</li>

          <li>这是第30个li</li>

          <li>这是第31个li</li>

          <li>这是第32个li</li>

          <li>这是第33个li</li>

          <li>这是第34个li</li>

          <li>这是第35个li</li>

          <li>这是第36个li</li>

          <li>这是第37个li</li>

          <li>这是第38个li</li>

          <li>这是第39个li</li>

          <li>这是第40个li</li>

          <li>这是第41个li</li>

          <li>这是第42个li</li>

          <li>这是第43个li</li>

          <li>这是第44个li</li>

          <li>这是第45个li</li>

          <li>这是第46个li</li>

          <li>这是第47个li</li>

          <li>这是第48个li</li>

          <li>这是第49个li</li>

          <li>这是第50个li</li>

          <li>这是第51个li</li>

          <li>这是第52个li</li>

          <li>这是第53个li</li>

          <li>这是第54个li</li>

          <li>这是第55个li</li>

          <li>这是第56个li</li>

          <li>这是第57个li</li>

          <li>这是第58个li</li>

          <li>这是第59个li</li>

          <li>这是第60个li</li>

        </ul>

      </div>

      <div style="flex: 1; height: 100%; overflow: auto;">

        <ul>

          <li>这是二组的第1个li</li>

          <li>这是二组的第2个li</li>

          <li>这是二组的第3个li</li>

          <li>这是二组的第4个li</li>

          <li>这是二组的第5个li</li>

          <li>这是二组的第6个li</li>

          <li>这是二组的第7个li</li>

          <li>这是二组的第8个li</li>

          <li>这是二组的第9个li</li>

          <li>这是二组的第10个li</li>

          <li>这是二组的第11个li</li>

          <li>这是二组的第12个li</li>

          <li>这是二组的第13个li</li>

          <li>这是二组的第14个li</li>

          <li>这是二组的第15个li</li>

          <li>这是二组的第16个li</li>

          <li>这是二组的第17个li</li>

          <li>这是二组的第18个li</li>

          <li>这是二组的第19个li</li>

          <li>这是二组的第20个li</li>

          <li>这是二组的第21个li</li>

          <li>这是二组的第22个li</li>

          <li>这是二组的第23个li</li>

          <li>这是二组的第24个li</li>

          <li>这是二组的第25个li</li>

          <li>这是二组的第26个li</li>

          <li>这是二组的第27个li</li>

          <li>这是二组的第28个li</li>

          <li>这是二组的第29个li</li>

          <li>这是二组的第30个li</li>

          <li>这是二组的第31个li</li>

          <li>这是二组的第32个li</li>

          <li>这是二组的第33个li</li>

          <li>这是二组的第34个li</li>

          <li>这是二组的第35个li</li>

          <li>这是二组的第36个li</li>

          <li>这是二组的第37个li</li>

          <li>这是二组的第38个li</li>

          <li>这是二组的第39个li</li>

          <li>这是二组的第40个li</li>

          <li>这是二组的第41个li</li>

          <li>这是二组的第42个li</li>

          <li>这是二组的第43个li</li>

          <li>这是二组的第44个li</li>

          <li>这是二组的第45个li</li>

          <li>这是二组的第46个li</li>

          <li>这是二组的第47个li</li>

          <li>这是二组的第48个li</li>

          <li>这是二组的第49个li</li>

          <li>这是二组的第50个li</li>

        </ul>

      </div>

    </main>

    <footer>底部</footer>

  </div>

</body>

</html>

 页面效果如下：左右两侧都有滚动条。

 

相关文章：

【一看就会】实现仿京东移动端页面滚动条布局

简单粗暴直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" content&q…...

编程日记 2023/4/1 3:49:25

网易的“草长莺飞二月天”：增长稳健，加码研发，逐浪AI

2月23日&#xff0c;网易发布了2022年第四季度财报。 这是网易与暴雪分道扬镳后的首份财报&#xff0c;加上近期AIGC热度扩散至游戏、教育等各个领域&#xff0c;网易第四季度业绩及其对于GPT等热门技术的探索受到市场关注。 根据财报&#xff0c;第四季度&#xff0c;网易营…...

编程日记 2023/3/21 23:07:45

NPC内网穿透教程-入门

安装 安装包安装 releases下载 下载对应的系统版本即可&#xff0c;服务端和客户端是单独的 源码安装 安装源码 go get -u ehang.io/nps 编译 服务端go build cmd/nps/nps.go 客户端go build cmd/npc/npc.go docker安装 server安装说明 client安装说明 启动 服务端 下…...

编程日记 2023/3/22 15:42:11

【Linux修炼】14.磁盘结构/文件系统/软硬链接/动静态库

每一个不曾起舞的日子&#xff0c;都是对生命的辜负。 磁盘结构/文件系统/软硬链接/动静态库前言一.磁盘结构1.1 磁盘的物理结构1.2 磁盘的存储结构1.3 磁盘的逻辑结构二.理解文件系统2.1 对IO单位的优化2.2 磁盘分区与分组2.3 分组的管理方法2.4 文件操作三.软硬链接3.1理解硬…...

编程日记 2023/2/25 7:16:33

Spring源码分析：创建 BeanDefinition 流程

一、前期准备1.1 环境依赖<dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.1.7.RELEASE</version></dependency><dependency><groupId&…...

编程日记 2023/3/20 11:27:54

Linux 练习一（思维导图 + 练习过程）

文章目录一、Linux 用户管理及文件操作第一段练习记录&#xff1a;主要对用户进行删除添加设置密码等操作第二段练习记录&#xff1a;主要包括权限设置和查找命令第三段练习记录&#xff1a;关于文件的命令练习第四段练习记录&#xff1a;查找命令及查看内存命令的使用二、Linu…...

编程日记 2023/4/1 3:51:14

高德地图基础教程超详细版

在当前社会&#xff0c;对于地图的使用是很必须的&#xff0c;所以对于程序员来说也是需要掌握的技能&#xff0c;目前主流的又百度地图和高德地图&#xff0c;但是我建议使用高德地图&#xff0c;因为百度地图的API着实不好用吖&#xff0c;不好理解&#xff0c;对于开发人员来…...

编程日记 2023/4/2 2:57:58

基于A7核开发板的串口实现控制LED亮灭

1.通过操作Cortex-A7核&#xff0c;串口输入相应的命令&#xff0c;控制LED灯进行工作 1>例如在串口输入led1on,开饭led1灯点亮 2>例如在串口输入led1off,开饭led1灯熄灭 3>例如在串口输入led2on,开饭led2灯点亮 4>例如在串口输入led2off,开饭led2灯熄灭 5>例如…...

编程日记 2023/2/25 7:11:59

HyperGBM用Adversarial Validation解决数据漂移问题

本文作者&#xff1a;杨健&#xff0c;九章云极 DataCanvas 主任架构师 数据漂移问题近年在机器学习领域来越来越得到关注&#xff0c;成为机器学习模型在实际投产中面对的一个主要挑战。当数据的分布随着时间推移逐渐发生变化&#xff0c;需要预测的数据和用于训练的数据分布…...

编程日记 2023/2/25 7:10:52

关基系统三月重保安全监测怎么做？ScanV提供纯干货！

三月重保当前&#xff0c;以政府、大型国企央企、能源、金融等重要行业和领域为代表的关键信息基础设施运营单位都将迎来“网络安全大考”。 对重要关基系统进行安全风险监测并收敛暴露面&#xff0c;响应监管要求进行安全加固&#xff0c;重保期间实时安全监测与数据汇报等具体…...

编程日记 2023/4/2 3:00:52

RK3588关键电路 PCB Layout设计指南

1、音频接口电路 PCB 设计&#xff08;1&#xff09;所有 CLK 信号建议串接 22ohm 电阻&#xff0c;并靠近 RK3588 放置&#xff0c;提高信号质量&#xff1b;&#xff08;2&#xff09;所有 CLK 信号走线不得挨在一起&#xff0c;避免串扰&#xff1b;需要独立包地&#xff0c…...

编程日记 2023/4/2 15:21:22

二分边界详细总结

一、查找精确值 从一个有序数组中找到一个符合要求的精确值&#xff08;如猜数游戏&#xff09;。如查找值为Key的元素下标&#xff0c;不存在返回-1。 //这里是left<right。 //考虑这种情况&#xff1a;如果最后剩下A[i]和A[i1]&#xff08;这也是最容易导致导致死循环的…...

编程日记 2023/2/25 7:07:27

STM32---备份寄存器BKP和 FLASH学习使用

BKP库函数 学习BKP&#xff0c;首先就是知道BKP每一个函数的作用然后如何使用即可 使用备份域的作用只需要操作上面的两个函数即可&#xff0c;其余的都是它的其他功能 BKP简介 备份寄存器是42个16位的寄存器&#xff0c;可用来存储84个字节的用户应用程序数据。他们处在备份…...

编程日记 2023/2/25 7:06:18

Python-生成元组和字典

1.生成元组元组是元素按顺序组合后的产物&#xff0c;元组对象的类型是tuple型含有两个元素的元组成为数据对元组可以包含任意数量和任意类型的元素&#xff0c;其元素总数可以为0、1、2等&#xff0c;并且元素的先后顺序是由意义的。另外&#xff0c;元组中的元素类型没有必要…...

编程日记 2023/4/1 3:53:18

I.MX6ULL内核开发10：设备树

目录 一、设备树简介 二、设备树源码 三、获取设备树信息 1、增加设备节点 2、内核编译设备树 3、替换设备树文件 4、查看设备树节点 5、在驱动中获取节点的属性 6、编译驱动模块 7、加载模块 一、设备树简介 设备树的作用是描述一个硬件平台的硬件资源。这个“设备树…...

编程日记 2023/2/25 7:03:56

【大数据】记一次hadoop集群missing block问题排查和数据恢复

问题描述 集群环境总共有2个NN节点&#xff0c;3个JN节点&#xff0c;40个DN节点&#xff0c;基于hadoop-3.3.1的版本。集群采用的双副本&#xff0c;未使用ec纠删码。 问题如下&#xff1a; bin/hdfs fsck -list-corruptfileblocks / The list of corrupt files under path…...

编程日记 2023/2/25 7:02:48

国产音质好的蓝牙耳机有哪些？国产音质最好的耳机排行

随着时间的推移&#xff0c;真无线蓝牙耳机逐渐占据耳机市场的份额&#xff0c;成为人们日常生活中必备的数码产品之一。蓝牙耳机品牌也多得数不胜数&#xff0c;哪些国产蓝牙耳机音质好&#xff1f;下面&#xff0c;我们从音质出来&#xff0c;来给大家介绍几款国产蓝牙耳机&a…...

编程日记 2023/4/1 3:54:27

CTFer成长之路之XSS的魔力

XSS的魔力CTF XSS闯关 题目描述: 你能否过关斩将解决所有XSS问题最终获得flag呢&#xff1f; docker-compose.yml version: "3.2"services:xss:image: registry.cn-hangzhou.aliyuncs.com/n1book/web-xss:latestports:- 3000:3000启动方式 docker-compose up -…...

编程日记 2023/2/25 7:00:32

行锁、表锁、主键外键、表之间的关联关系

Java知识点总结&#xff1a;想看的可以从这里进入 目录2.4、行锁、表锁2.5、主键、外键2.5.1、主键2.5.2、外键2.6、表的关联关系2.4、行锁、表锁 MyISAM默认采用表级锁&#xff0c;InnoDB默认采用行级锁。 表锁&#xff1a;开销小&#xff0c;加锁快&#xff0c;不会出现死锁…...

编程日记 2023/2/25 6:59:21

JavaScript 进阶(面试必备)--charater4

文章目录前言一、深浅拷贝:one: 浅拷贝:two:深拷贝二、异常处理:one: throw 抛异常:two: try /catch 捕获异常:three:debugger三、处理thisthis指向 :one:普通函数this指向this指向 :two: 箭头函数this指向3.2 改变this:one: call():two: apply():three: bind()四、性能优化:on…...

编程日记 2023/4/1 3:55:28

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/10/29 12:08:57

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/10/27 13:45:33

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/10/19 10:37:08

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/30 9:24:58

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/10/30 5:10:47

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/10/24 21:55:27

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2025/10/26 9:24:28

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

编程新知 2025/10/29 5:46:51

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40