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

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

news 2025/12/28 12:16:47

问题

  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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/12/28 7:24:23

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/12/24 0:54:05

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/11/2 0:32:25

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/12/15 11:10:54

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/12/28 1:56:49

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

编程新知 2025/12/25 14:37:58