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

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

news 2026/5/15 7:44:23

问题

  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

碧蓝航线Alas自动化脚本终极指南：7x24小时全自动游戏管理解决方案

碧蓝航线Alas自动化脚本终极指南&#xff1a;7x24小时全自动游戏管理解决方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript …...

编程新知 2026/5/15 7:40:10

Overture开源框架：快速部署生产级大语言模型API服务

1. 项目概述&#xff1a;一个开箱即用的开源AI应用框架最近在折腾AI应用开发的朋友&#xff0c;估计都绕不开一个核心问题&#xff1a;如何快速、稳定地把一个大语言模型&#xff08;LLM&#xff09;的能力&#xff0c;封装成一个能对外提供服务的API&#xff0c;并且这个服务还…...

编程新知 2026/5/15 7:10:38

生物科研绘图的终极解决方案：Bioicons免费矢量图标库完全指南

生物科研绘图的终极解决方案&#xff1a;Bioicons免费矢量图标库完全指南 【免费下载链接】bioicons A library of free open source icons for science illustrations in biology and chemistry 项目地址: https://gitcode.com/gh_mirrors/bi/bioicons 还在为科研论文配…...

编程新知 2026/5/15 3:28:55

AI智能体如何通过MCP协议标准化调用外部工具

1. 项目概述&#xff1a;当AI智能体学会“使用工具” 最近在探索AI智能体开发时&#xff0c;我遇到了一个非常有意思的项目&#xff1a; agentsimdev/agentsim-mcp 。乍一看这个名字&#xff0c;可能有些朋友会感到困惑&#xff0c;这“MCP”是什么&#xff1f;是“模型上下文…...

编程新知 2026/5/15 2:41:00

【Claude代码审查实战指南】：20年老炮亲授Python项目零误判率审查法

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Claude代码审查实战指南的起源与核心理念 Claude代码审查实战指南诞生于开源协作日益深化、AI辅助开发成为工程标配的交叉节点。其核心理念并非替代人类审阅者&#xff0c;而是构建“人机协同的可信审查…...

编程新知 2026/5/15 2:11:11

2025年AI编程工具Cost分析 — 每个开发者都该看的省钱攻略

你每个月花多少在AI编程工具上&#xff1f;$50&#xff1f;$100&#xff1f;还是$200&#xff1f;> 我花了2周时间&#xff0c;逐一实测了5款主流AI编程工具&#xff0c;算清了每一分钱的价值。—## 一、先看总账&#xff1a;5款工具年费对比| 工具 | 月费 | 年费 | 免费额度…...

编程新知 2026/5/15 2:00:05

汽车电子电源设计挑战与同步降压转换器技术解析

1. 汽车电子电源设计的核心挑战在当代汽车电子系统中&#xff0c;电源管理IC正面临前所未有的技术挑战。作为一名在汽车电子领域工作多年的工程师&#xff0c;我亲眼见证了电源设计从简单的线性稳压器发展到如今复杂的高频开关电源系统的全过程。现代豪华车型可能包含超过150个…...

编程新知 2026/5/15 1:43:52

亲测分享！优豆云免费资源助力我的小站起飞，还有惊喜优惠

大家好呀&#xff01; 最近一直在捣鼓自己的个人小项目和博客&#xff0c;对于像我这样的新手来说&#xff0c;成本控制是首要考虑的问题。偶然间发现了 优豆云 这个宝藏平台 (https://www.udouyun.com)&#xff0c;简直是为我们这些预算有限但又想练手、展示创意的朋友量身定做…...

编程新知 2026/5/15 1:39:51

保姆级避坑指南：在PVE 7.4上完美安装Windows 11专业版（解决TPM、驱动、磁盘识别问题）

PVE 7.4深度优化&#xff1a;Windows 11专业版安装全流程避坑手册 对于虚拟化技术爱好者来说&#xff0c;在Proxmox VE&#xff08;PVE&#xff09;上安装Windows 11专业版既是一次性能挑战&#xff0c;也是一次技术探索。不同于简单的安装指南&#xff0c;本文将聚焦于那些让大…...

编程新知 2026/5/14 23:28:50

Vue2项目集成DHTMLX Gantt：从基础配置到企业级功能定制

1. 为什么选择DHTMLX Gantt与Vue2集成 在项目管理系统的开发中&#xff0c;甘特图是最核心的视图之一。我调研过市面上几乎所有主流甘特图方案&#xff0c;最终选择DHTMLX Gantt主要基于三个实际考量&#xff1a; 首先&#xff0c;它的渲染性能确实出色。在测试中&#xff0c;加…...

编程新知 2026/5/14 23:09:53