CSS 滚动容器与固定 Tabbar 自适应的几种方式

问题

  1. 容器高度使用 px 定高时,随着页面高度发生变化,组件展示的数量不能最大化的铺满,导致出现底部留白。
  2. 容器高度使用 vw 定高时,随着页面宽度发生变化,组件展示的数量不能最大化的铺满,导致出现底部留白。

在这里插入图片描述

很明显这两种方案都是采用 错误的像素单位 而导致的,下面我将会介绍如何使用其它方案来解决。

方式1:采用 padding

给最外层的容器定好 padding,子容器后续以 padding 为基准,案例代码如下:

<!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>html,body {margin: 0; padding: 0;}* {box-sizing: border-box;}.main {padding-top: 100px;padding-bottom: 100px;}.container .component {width: 200px;height: 200px;margin-bottom: 10px;background: orange;}header, footer {position: fixed;height: 100px;background: red;left: 0; right: 0;}header {top: 0;}footer {bottom: 0;}</style>
</head>
<body><div class="main"><header>Header Tabbar</header><div class="container"><div class="component">1</div><div class="component">2</div><div class="component">3</div><div class="component">4</div><div class="component">5</div><div class="component">6</div><div class="component">7</div><div class="component">8</div><div class="component">9</div><div class="component">10</div></div><footer>Footer Tabbar</footer></div>
</body>
</html>

效果:
在这里插入图片描述

即保留了原生滚动(不用设置 overflow),也实现了自适应,解决了底部留白的问题。

在 header 不固定但 footer 固定的情况下,可将容器的 padding-top 去掉只保留 padding-bottom 即可。

方式2:采用 vh

其实,header 不用 fixied 也能达到吸顶效果,其原理是,给容器定高 + overflow 实现自己的滚动容器,但如果使用了错误的单位,比如本文一开始说的 vw,就会导致留白情况:
在这里插入图片描述
我们可以采用 vh 单位来解决,案例代码如下:

<!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>html,body {margin: 0; padding: 0;}* {box-sizing: border-box;}.container {height: 65vh;overflow: auto;}.container .component{width: 200px;height: 200px;margin-bottom: 10px;background: orange;}header {height: 100px;background: pink;}footer {position: fixed;height: 100px;background: red;left: 0; right: 0;bottom: 0;}</style>
</head>
<body><div class="main"><header>Header Tabbar</header><div class="container"><div class="component">1</div><div class="component">2</div><div class="component">3</div><div class="component">4</div><div class="component">5</div><div class="component">6</div><div class="component">7</div><div class="component">8</div><div class="component">9</div><div class="component">10</div></div><footer>Footer Tabbar</footer></div>
</body>
</html>

高度未发生变化前:在这里插入图片描述
高度发生变化后:
在这里插入图片描述

方式3:采用 JS getBoundingClientRect 动态计算

vh、vw 这类动态计算 px 的单位在 IE9 前是不支持的,这里可以考虑借助 JS 提供的 getBoundingClientRect 函数来实现。
它会返回当前元素的宽高、top/left 偏离值,我们可以根据两个元素之间的 top 值相减来获取对应的定高,实现组件最大化铺满,代码如下:

<!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>html,body {margin: 0; padding: 0;}* {box-sizing: border-box;}.container {overflow: auto;}.container .component{width: 10vw;height: 10vw;margin-bottom: 10px;background: orange;}header {height: 100px;background: pink;}footer {position: fixed;height: 100px;background: red;left: 0; right: 0;bottom: 0;}</style>
</head>
<body><div class="main"><header>Header Tabbar</header><div id="container" class="container"><div class="component">1</div><div class="component">2</div><div class="component">3</div><div class="component">4</div><div class="component">5</div><div class="component">6</div><div class="component">7</div><div class="component">8</div><div class="component">9</div><div class="component">10</div></div><footer id="footer">Footer Tabbar</footer></div><script>addEventListener("DOMContentLoaded", (event) => { const footerDom = document.getElementById('footer')const containerDom = document.getElementById('container')const { top: footerOffsetTop } = footerDom.getBoundingClientRect();const { top: containerOffsetTop } = containerDom.getBoundingClientRect();const scrollHeight = footerOffsetTop - containerOffsetTop;containerDom.style.height = scrollHeight + 'px'});</script>
</body>
</html>

页面高度未发生变化前:

页面高度发生变化后:
在这里插入图片描述

本文就到这里,若有问题或其它更好的方案欢迎指出。

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

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

相关文章

【操作系统】聊聊文件传输的零拷贝、PageCache、异步IO机制

在目前主流的系统中&#xff0c;其实大多数都是数据密集型系统&#xff0c;所以设计数据密集型应用一书非常经典&#xff0c;推荐一读。而大多数遇到的问题都是存储问题。CPU、内存 因为本身的读写速度比较快&#xff0c;所以磁盘就成为了一个性能瓶颈。 针对磁盘优化的技术层…

Harbor 私有仓库迁移

文章目录 一.私有仓库迁移的介绍1.为何要对Harbor 私有仓库的迁移2.Harbor 私有仓库的迁移特点3. Harbor 私有仓库的迁移注意要点 二.私有仓库迁移配置1.源Harbor配置&#xff08;192.168.198.11&#xff09;&#xff08;1&#xff09;接着以下操作查看容器状况及是否可以登录 …

C语言之数组题

目录 1.使用函数实现数组操作 2.冒泡排序 3.三子棋 4.【一维数组】交换数组 5.扫雷 6.概念辨析tips 我又来了&#xff0c;今天是数组题&#xff0c;本人还在补军训真的热&#xff01;&#x1f197; 1.使用函数实现数组操作 2.冒泡排序 3.三子棋 4.【一维数组】交换数组 …

Windows10 系统安装教程

多虚不如少实。 一、 下载安装包 下载前景&#xff1a;网上下载的 windows10 系统一般都有捆绑软件&#xff0c;用户体验不爽&#xff0c;所以建议到 正规渠道下载 windows10 系统的不同版本。另外网上也有一些 windows10 系统的镜像文件 可以直接一键安装&#xff0c;…

科技政策 | 四川省科学技术厅关于发布2024年第一批省级科技计划项目申报指南的通知

原创 | 文 BFT机器人 近日&#xff0c;四川省科学技术厅发布了2024年第一批省级科技计划项目申报指南&#xff1b;其中包括自然科学基金项目、重点研发计划、科技成果转移转化引导计划、科技创新基地&#xff08;平台&#xff09;和人才计划。 01 自然科学基金项目 实施周期 …

YOLOv5引入FasterNet主干网络,目标检测速度提升明显

目录 一、背景介绍1.1 目标检测算法简介1.2 YOLOv5简介及发展历程 二、主干网络选择的重要性2.1 主干网络在目标检测中的作用2.2 YOLOv5使用的默认主干网络 三、FasterNet简介与原理解析3.1 FasterNet概述3.2 FasterNet的网络结构3.2.1 基础网络模块3.2.2 快速特征融合模块3.2.…

打造互动体验:品牌 DTC 如何转变其私域战略

越来越多的品牌公司选择采用DTC 模式与消费者进行互动&#xff0c;而非仅仅销售产品。通过与消费者建立紧密联系&#xff0c;DTC模式不仅可以提供更具成本效益的规模扩张方式&#xff0c;还能够控制品牌体验、获取宝贵的第一方数据并提升盈利能力。然而DTC模式的经济模型比许多…

【C++】—— 异常处理

前言&#xff1a; 本期&#xff0c;我将给大家讲解的是有关 异常处理 的相关知识&#xff01; 目录 &#xff08;一&#xff09;C语言传统的处理错误的方式 &#xff08;二&#xff09;C异常概念 &#xff08;三&#xff09;异常的使用 1、异常的抛出和捕获 1️⃣ 异常的…

【LeetCode-中等题】98. 验证二叉搜索树

文章目录 题目方法一&#xff1a;BFS 层序遍历方法二&#xff1a; 题目 方法一&#xff1a;BFS 层序遍历 利用层序遍历 拿到每一个节点 并且给每一个结点配备一个最大值和最小值的队列 只要节点在最大值和最小值之间就满足二叉搜索树的条件 public boolean isValidBST(TreeNo…

三电平离网逆变器接不平衡负载仿真

文章目录 **0、系统框图****1、纯阻性负载R****2、纯感性负载L****3、纯容性负载C****4、 RL负载****5、RC负载****6、CL负载****7、RLC负载** 0、系统框图 闭环控制 PWM调制 逆变桥 LCL滤波电路 负载&#xff08;可配置&#xff09; 坐标变换&#xff08;采样得到&#xff09;…

HTTP:http上传文件的原理及java处理方法的介绍

为了说明原理&#xff0c;以下提供一个可以上传多个文件的例子&#xff0c;html页面代码如下&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>http upload file</title> </head> <body>…

《存储IO路径》专题:IO虚拟化初探

大家好&#xff0c;欢迎来到今天的科技小课堂。今天我们要聊聊的是一项非常有趣且实用的技术——I/O虚拟化&#xff08;Input/Output Virtualization&#xff0c;简称IOV&#xff09;。想象一下&#xff0c;如果把物理硬件资源比作一道丰盛的大餐&#xff0c;那么IOV就是那位神…

【VRRP】虚拟路由冗余协议

什么是VRRP&#xff1f; 虚拟路由冗余协议VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;是一种用于提高网络可靠性的容错协议。通过VRRP&#xff0c;可以在主机的下一跳设备出现故障时&#xff0c;及时将业务切换到备份设备&#xff0c;从而保障网络通信的…

SQL注入之联合查询

文章目录 联合查询是什么&#xff1f;联合查询获取cms账号密码尝试登录 联合查询是什么&#xff1f; 适用数据库中的内容会回显到页面中来的情况。联合查询就是利用union select 语句&#xff0c;该语句会同时执行两条select 语句&#xff0c;实现跨库、跨表查询。 必要条件 两…

电商API接口的研发和应用!

API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;指的是为不同的软件应用程序提供编程接口的一组协议、规则以及工具的集合&#xff0c;以便它们能够互相交互&#xff0c;实现数据通信和功能调用。API已成为了现代软件开发和商业应用…

countDown+react+hook

道阻且长&#xff0c;行而不辍&#xff0c;未来可期 知识点一&#xff1a; new Date().getTime()可以得到得到1970年01月1日0点零分以来的毫秒数。单位是毫秒 new Date().getTime()/1000获取秒数1分钟60秒&#xff0c;1小时60分钟1hour:60*60>单位是秒 60*60*1000>单位…

Gin 框架入门实战系列(一)

GIN介绍 Gin是一个golang的微框架,封装比较优雅,API友好,源码注释比较明确,具有快速灵活,容错方便等特点 对于golang而言,web框架的依赖要远比Python,Java之类的要小。自身的net/http足够简单,性能也非常不错 借助框架开发,不仅可以省去很多常用的封装带来的时间,…

Java项目-苍穹外卖-Day05-Redis技术应用

1.店铺营业状态设置 需求分析和设计 左上角要求是有回显的 所以至少两个接口 1.查询营业状态接口&#xff08;分为了管理端和用户端&#xff09; 2.修改营业状态接口 因为管理端和用户端路径不同&#xff0c;所以现在是至少三个接口的 可以发现如果存到表里除了id只有一个…

Kafka3.0.0版本——Leader故障处理细节原理

目录 一、服务器信息二、服务器基本信息及相关概念2.1、服务器基本信息2.2、LEO的概念2.3、HW的概念 三、Leader故障处理细节 一、服务器信息 三台服务器 原始服务器名称原始服务器ip节点centos7虚拟机1192.168.136.27broker0centos7虚拟机2192.168.136.28broker1centos7虚拟机…

智慧矿山2.0:煤矿智能化综合管理AI大数据监管平台建设方案设计

一、行业背景 能源与煤矿是我国国民经济的重要物质生产部门和支柱产业之一&#xff0c;同时也是一个安全事故多发的高危行业&#xff0c;施工阶段的现场管理对工程成本、进度、质量及安全等至关重要。煤矿智能化既是未来趋势&#xff0c;更是产业发展需求&#xff0c;建设智慧…