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

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

news 2025/9/16 9:41:37

问题

  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>

页面高度未发生变化前：

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

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

相关文章：

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

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

编程日记 2023/8/30 0:46:33

IP 地址追踪工具

IP 地址跟踪工具是一种网络实用程序&#xff0c;允许您扫描、跟踪和获取详细信息&#xff0c;例如 IP 地址的 MAC 和接口 ID。IP 跟踪解决方案通过使用不同的网络扫描协议来检查网络地址空间来收集这些详细信息。一些高级 IP 地址跟踪器软件&#xff08;如 OpUtils&#xff09;…...

编程日记 2023/8/30 0:45:32

最新企业网盘产品推荐榜发布

随着数字化发展&#xff0c;传统的文化存储方式已无法跟上企业发展的步伐。云存储的出现为企业提供了新的文件管理存储模式。企业网盘作为云存储的代表性工具&#xff0c;被越来越多的企业所青睐。那么在众多企业网盘产品中&#xff0c;企业该如何找到合适的企业网盘呢&#xf…...

编程日记 2023/8/30 0:44:31

实用的面试经验分享：程序员们谈论他们的面试历程

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/30 0:43:30

6.oracle中listagg函数使用

1. 作用 可以实现行转列&#xff0c;将多列数据聚合为一列&#xff0c;实现数据的压缩 2. 语法 listagg(measure_expr&#xff0c;delimiter) within group ( order by order_by_clause); 解释&#xff1a; measure_expr可以是基于任何列的表达式 delimiter分隔符&#xff0c…...

编程日记 2023/8/30 0:42:29

习题练习 C语言（暑期）

编程能力小提升&#xff01; 前言一、转义字符二、重命名与宏定义三、三目运算符四、计算日期到天数转换五、计算字符串长度六、宏定义应用七、const常量八、C语言基础九、const常量&#xff08;二&#xff09;十、符号运算十一、记负均正十二、SWITCH&#xff0c;CASE十三、错…...

编程日记 2023/8/30 0:41:28

C++中虚函数表的概念

当一个类对象指针调用虚函数时&#xff0c;这就涉及到 运行时多态 的概念。这意味着实际调用的函数取决于对象的实际类型&#xff0c;而不仅仅是指针的静态类型。 假设我们有以下的类层次结构&#xff1a; class Base { public:virtual void print() {std::cout << &qu…...

编程日记 2023/8/30 0:40:27

代码随想录算法训练营第四十八天 | 198.打家劫舍，213.打家劫舍II，337.打家劫舍III

代码随想录算法训练营第四十八天 | 198.打家劫舍&#xff0c;213.打家劫舍II&#xff0c;337.打家劫舍III 198.打家劫舍213.打家劫舍II337.打家劫舍III 198.打家劫舍 题目链接 视频讲解 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff…...

编程日记 2023/8/30 0:39:25

uniapp项目实战系列(1)：导入数据库，启动后端服务，开启代码托管

目录 前言前期准备1.数据库的导入2.运行后端服务2.1数据库的后端配置2.2后端服务下载依赖&#xff0c;第三方库2.3启动后端服务 3.开启gitcode代码托管 ✨ 原创不易&#xff0c;还希望各位大佬支持一下&#xff01; &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&…...

编程日记 2023/8/30 0:38:24

在互联网+的背景下，企业如何创新客户服务？

随着互联网的发展&#xff0c;开始数字化转型的潮流&#xff0c;移动互联网平台为各个行业带来了发展的新方向。企业有了移动互联网的加持&#xff0c;为客户提供了更好的服务。当移动互联网平台能够为客户提供更好的用户体验时&#xff0c;相应地&#xff0c;客户也给企业带来…...

编程日记 2023/8/30 0:37:23

国内的化妆品核辐射检测

化妆品核辐射物质检测是指检测化妆品中的放射性物质&#xff0c;包括放射性核素和放射性同位素。这些放射性物质主要来源于环境中的放射性污染&#xff0c;如空气、水和土壤中的放射性物质&#xff0c;以及化妆品生产过程中的放射性污染&#xff0c;如原料、设备、工艺等。化妆…...

编程日记 2023/8/30 0:36:21

春秋云镜:CVE-2019-9042(Sitemagic CMS v4.4 任意文件上传漏洞)

一、题目 靶标介绍&#xff1a; Sitemagic CMS v4.4 index.php?SMExtSMFiles 存在任意文件上传漏洞&#xff0c;攻击者可上传恶意代码执行系统命令。 进入题目&#xff1a; admin/admin /index.php?SMExtSMFiles&SMTemplateTypeBasic&SMExecModeDedicated&SMFil…...

编程日记 2023/8/30 0:35:18

20230828工作日志：

今天遇到了很多问题&#xff0c;下次可以做得更好更快的几个地方&#xff1a; 1 sql语句的检查 肯定要先在navicate 里执行看&#xff0c;是否有语法错误。即使没有&#xff0c;也还是要注意一些问题&#xff1a;IDEA里换行的时候&#xff0c;“后面要空一格&#xff0c;如果连…...

编程日记 2023/8/30 0:34:14

flink on yarn 部署

需要jars -rwxr-xrwx 3 root supergroup 58284 2022-11-30 03:44 /lib/flink/commons-cli-1.5.0.jar -rw-r--r-- 3 root supergroup 48497 2022-12-10 03:04 /lib/flink/flink-cep-scala_2.12-1.14.3.jar -rw-r--r-- 3 root supergroup 189468 2022-12-10…...

编程日记 2023/8/30 0:33:13

postgresql基于postgis常用空间函数

1、ST_AsGeoJSON 图元转geojson格式 select ST_AsGeoJSON(l.geom) from g_zd l limit 10 2、 ST_Transform 坐标转换 select st_transform(l.shape, 3857) from sde_wf_cyyq l limit 10select st_astext(st_transform(l.shape, 3857)) from sde_wf_cyyq l limit 103、st_aste…...

编程日记 2023/8/30 0:32:12

详细讲解移植u-boot.2022.10版本移植到开发板基本方法

大家好&#xff0c;我是ST​。​ 今天给大家讲一讲如何将u-boot.2022.10版本移植到imx6ull开发板上。 环境 选项内容编译主机UbuntuLTS 18.04目标板ATK I.MX6ULL&#xff08;512MB DDR3 8GB EMMC&#xff09;u-boot版本2022.10交叉编译工具链gcc-linaro-7.5.0-2019.12-i686…...

编程日记 2023/8/30 0:31:08

Vue.js2+Cesium1.103.0 十一、Three.js 炸裂效果

Vue.js2Cesium1.103.0 十一、Three.js 炸裂效果 Demo ThreeModelBoom.vue <template><div:id"id"class"three_container"/> </template><script> /* eslint-disable eqeqeq */ /* eslint-disable no-unused-vars */ /* eslint-d…...

编程日记 2023/8/30 0:30:07

Nodejs快速搭建简单的HTTP服务器，并发布公网远程访问

前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff08;原为 Node.js Foundation&#xff0c;已与 JS Foundation 合并&#xff09;持有和维护&#xff0c;亦为 Linux 基金会的项目。Node.js 采用 Google 开发…...

编程日记 2023/8/30 0:29:05

爬虫入门01

1. 请求头中最常见的一些重要内容 User-Agent : 请求载体的身份标识(⽤啥发送的请求)Referer: 防盗链(这次请求是从哪个⻚⾯来的? 反爬会⽤到)cookie: 本地字符串数据信息(⽤户登录信息, 反爬的token) 2. 响应头中一些重要内容 cookie: 本地字符串数据信息(⽤户登录信息, 反…...

编程日记 2023/8/30 0:28:04

解读GIS软件：从ArcGIS到山海鲸可视化的全方位介绍

在现代社会&#xff0c;地理信息系统&#xff08;GIS&#xff09;的应用已经渗透到了各个领域&#xff0c;为我们提供了丰富的地理数据分析和可视化工具。下面介绍几款常见的GIS工具软件&#xff0c;一起来了解它们的特点和优势。 1. ArcGIS: ArcGIS由Esri公司开发&#xff0c;…...

编程日记 2023/8/30 0:27:03

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/9/14 1:53:04

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/9/16 1:45:43

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/9/7 2:01:34

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

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

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

编程新知 2025/9/14 12:35:12

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/8/25 23:10:09

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/8/19 5:37:33

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

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

编程新知 2025/9/3 23:09:31