TCG Pocket Collection Tracker：解决集合页面底部留白问题的技术方案

TCG Pocket Collection Tracker：解决集合页面底部留白问题的技术方案

tcg-pocket-collection-tracker Simple application to track your Pokemon Pocket collection 项目地址: https://gitcode.com/gh_mirrors/tc/tcg-pocket-collection-tracker

问题背景

在TCG Pocket Collection Tracker项目中，用户报告了一个界面布局问题：集合页面底部出现了一块未填充内容的空白区域，类似于一个空的页脚。这个问题在高分辨率显示器（如4K）且启用了200%系统缩放的情况下尤为明显。

技术分析

经过分析，这个问题源于虚拟表格(virtual table)的高度计算方式。当前实现中采用了CSS的100vh（视口高度的100%）减去标题和筛选器部分的固定padding值来确定表格高度。这种实现方式存在两个主要问题：

1. 视口单位(vh)的局限性：100vh会直接获取整个视口的高度，但在不同缩放比例或屏幕尺寸下，这种固定计算方式无法动态适应剩余空间。

2. 响应式设计的挑战：为了确保在小屏幕上也能正常显示，必须保留足够的padding值，这导致在大屏幕上会出现底部留白。

解决方案

更合理的解决方案是放弃使用CSS的视口单位，转而采用JavaScript动态计算剩余可用空间。具体实现思路如下：

1. 获取页面元素尺寸：通过JavaScript获取标题栏、筛选器等固定高度元素的精确尺寸。

2. 计算剩余空间：从窗口总高度中减去这些固定元素的高度，得到表格可用的动态高度。

3. 响应式调整：监听窗口resize事件，在窗口尺寸变化时重新计算并应用新的高度值。

这种方法的优势在于：

• 能够精确适应各种屏幕尺寸和缩放比例
• 提供更流畅的用户体验
• 避免了硬编码的padding值带来的布局问题

实现参考

项目中类似的交易(Trade)页面已经实现了正确的布局行为，可以作为参考实现。这表明动态高度计算方案在该项目中是可行的，且已经有过成功实践。

兼容性考虑

在实现时需要注意：

• 高DPI显示器的适配
• 系统缩放设置的影响
• 不同浏览器的视口计算差异
• 移动端设备的触控支持

通过采用动态计算剩余空间的方案，可以彻底解决集合页面底部留白的问题，同时保持项目在各种设备和显示设置下的良好兼容性。

tcg-pocket-collection-tracker Simple application to track your Pokemon Pocket collection 项目地址: https://gitcode.com/gh_mirrors/tc/tcg-pocket-collection-tracker