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

news/2024/3/29 2:12:11/文章来源:https://blog.csdn.net/ll123456789_/article/details/129207469

简单粗暴直接上代码:

<!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>

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

 

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

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

相关文章

中移链结合CA证书实现节点准入控制

01背景介绍BSN开放联盟链&#xff08;BSN Open Permissioned Blockchain&#xff0c; 简称OPB&#xff09;包括多条基于公有链框架和联盟链框架搭建的公用链&#xff0c;开发者可以选择适合应用业务需求的开放联盟链部署和运行智能合约和分布式应用&#xff0c;每条开放联盟链各…

码匠 × OpenAI :快速生成 SQL 语句,提升开发效率!

目录 使用 OpenAI 生成 SQL 码匠连接与集成 OpenAI 总结 关于码匠 在码匠中&#xff0c;编写 SQL 语句&#xff0c;并结合码匠一系列开箱即用的组件实现复杂的业务逻辑&#xff0c;是很常见的应用开发场景。然而&#xff0c;不同的数据库在 SQL 增删改查操作语法、类型字段和…

Java知识复习(二)Java集合

1、List、Set和Map的区别 List&#xff1a;存储的顺序是有序的、可重复的Set&#xff1a;存储的顺序是无序的、不可重复的Map&#xff1a;使用键值对存储&#xff0c;Key和Value都是无序的&#xff0c;其中Key不可重复&#xff0c;而Value可重复 2、ArrayList和LinkedList的区…

JavaEE简单实例——MyBatis的一对一映射的嵌套查询的简单介绍和基础配置

简单介绍&#xff1a; 在前一章我们介绍了关于MyBatis的多表查询的时候的对应关系&#xff0c;其中有三种对应关系&#xff0c;分别是一对一&#xff0c;一对多&#xff0c;多对多的关系。如果忘记了这三种方式的对应形式可以去前面看看&#xff0c;一定要记住这三种映射关系的…

项目重构,从零开始搭建一套新的后台管理系统

背景 应公司发展需求&#xff0c;我决定重构公司的后台管理系统&#xff0c;从提出需求建议到现在的实施&#xff0c;期间花了将近半个月的时间&#xff0c;决定把这些都记录下来。 之前的后台管理系统实在是为了实现功能而实现的&#xff0c;没有考虑到后期的扩展性&#xf…

逆风翻盘拿下感知实习offer,机会总是留给有准备的人

个人背景211本&#xff0c;985硕&#xff0c;本科是计算机科学与技术专业&#xff0c;研究生是自学计算机视觉方向&#xff0c;本科主要做C和python程序设计开发&#xff0c;java安卓开发&#xff0c;研究生主要做目标检测&#xff0c;现在在入门目标跟踪和3d目标检测。无论文&…

并发编程学习篇从0-1合集

一、synchronized 一、原子性、有序性、可见性 1.1 原子性 数据库的事务&#xff1a;ACID A&#xff1a;原子性-事务是一个最小的执行的单位&#xff0c;一次事务的多次操作要么都成功&#xff0c;要么都失败。 并发编程的原子性&#xff1a;一个或多个指令在CPU执行过程中…

用Python获取弹幕的两种方式(一种简单但量少,另一量大管饱)

前言 弹幕可以给观众一种“实时互动”的错觉&#xff0c;虽然不同弹幕的发送时间有所区别&#xff0c;但是其只会在视频中特定的一个时间点出现&#xff0c;因此在相同时刻发送的弹幕基本上也具有相同的主题&#xff0c;在参与评论时就会有与其他观众同时评论的错觉。 在国内…

怎么从零开始学黑客,黑客零基础怎么自学

很多朋友对成为黑客很感兴趣&#xff0c;很大原因是因为看到电影中黑客的情节觉的特别的酷&#xff0c;看到他们动动手指就能进入任何系统&#xff0c;还有很多走上黑客之路的朋友仅仅是因为自己的qq被盗了&#xff0c;或者游戏里的装备被别人偷了&#xff0c;想要自己盗回来&a…

听车企做开发朋友说,面试Framework 必问~

近期听在车企工作的朋友说&#xff0c;今年去他们公司面试的人比往年增长了30%左右&#xff0c;但实际面试达到标准的人屈指可数&#xff0c;大多都是从 Android 开发方向转过来的。 车企招聘要求有哪些&#xff1f; 每个车企因为业务部门的不同&#xff0c;他们的要求也会有…

Linux操作系统基础知识命令参数详解

Linux操作系统 RAID分组 RAID JBOD RAID JBOD的意思是Just a Bunch Of Disks&#xff0c;是将多块硬盘串联起来组成一个大的存储设备&#xff0c;从某种意义上说这种类型不被算作RAID&#xff0c;在维基百科里JBOD同时也被归入非RAID架构。RAID JBOD将所有的磁盘串联成一个单…

保持超低温环境新方法:功耗降至十分之一!

&#xff08;图片来源&#xff1a;网络&#xff09;量子比特是量子计算机的主要构建部分&#xff0c;然而热量会导致量子比特容易出错&#xff0c;因此量子系统通常保存在超低温稀释制冷机内&#xff0c;可以将温度保持在绝对零度&#xff08;−273.15℃&#xff09;以上。但是…

如何使评论具有可操作性?取悦客户的指南

永远不要低估承认的力量。 当品牌与客户互动时&#xff0c;认可会带来更好的关系和更好的沟通。与买家和客户建立更多的个人联系意味着品牌需要证明他们支持他们的产品和客户。评论是利用客户分享他们的故事的那些时刻的绝佳机会。 为什么评论在 SaaS 中至关重要 在 B2B 软件的…

【python学习笔记】:如何去除字符串中空格

在输入数据时&#xff0c;很有可能会无意中输入多余的空格&#xff0c;或者在一些场景中&#xff0c;字符串前后不允许出现空格和特殊字符&#xff0c;此时就需要去除字符串中的空格和特殊字符。 【注意&#xff1a;这里的特殊字符&#xff0c;指的是制表符&#xff08;\t&…

ASEMI高压MOS管ASE65R330参数,ASE65R330图片

编辑-Z ASEMI高压MOS管ASE65R330参数&#xff1a; 型号&#xff1a;ASE65R330 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;650V 栅源电压&#xff08;VGS&#xff09;&#xff1a;20V 漏极电流&#xff08;ID&#xff09;&#xff1a;12.5A 功耗&#xff08;P…

57 - 深入解析任务调度

---- 整理自狄泰软件唐佐林老师课程 文章目录1. 问题1.1 思考1.2 实例分析&#xff1a;问题分析及解决2. 深入讨论2.1 任务调度的定义2.2 关于调度算法的分类2.3 什么时候进行任务调度2.4 任务的分类2.5 关于优先级调度2.6 问题2.7 调度算法的终极目标2.8 课后扩展1. 问题 系统…

在windows11上安装openssh服务端并修改端口号

在windows11上安装openssh服务端并修改端口号 目录1.软件下载地址2.修改端口3.启动ssh原文链接&#xff1a;https://blog.csdn.net/qq_62129885/article/details/1268467751.软件下载地址 Release v9.2.0.0p1-Beta PowerShell/Win32-OpenSSH (github.com) https://github.co…

浅谈智能电力运维管理系统在物业小区的应用分析

安科瑞 李亚俊 0引言 由于部分住宅小区存在电力设施纸质档案破损缺失、产权分界不清、查找故障点所在箱变&#xff08;箱式变电站&#xff0c;下同&#xff09;位置困难或小区出入口路径不明等情况&#xff0c;影响了抢修效率。为此&#xff0c;国网辽宁沈阳市沈北新区供电公…

Nacos Ignore the empty nacos configuration and get it based on dataId

1.配置错误 dataId问题 启动日志&#xff1a; 使用properties格式的文件&#xff1a; Ignore the empty nacos configuration and get it based on dataId[xxx-server] & group[DEFAULT_GROUP] Ignore the empty nacos configuration and get it based on dataId[xxx-s…

python 自动化测试 pytest 的使用

pytest 是一款以python为开发语言的第三方测试&#xff0c;主要特点如下&#xff1a; 比自带的 unittest 更简洁高效&#xff0c;兼容 unittest框架 支持参数化 可以更精确的控制要测试的测试用例 丰富的插件&#xff0c;已有300多个各种各样的插件&#xff0c;也可自定义扩…