如何让元素占满全屏并禁用滚动，解决PanZoom使用时出现滚动条问题

核心实现思路 #

• 全局禁用页面滚动，重置浏览器默认边距
• 父容器采用垂直Flex布局占满整个视口
• 子容器通过flex属性自动填充剩余高度，同时开启溢出隐藏
• 配置PanZoom的边界限制参数，避免内容拖动/缩放时超出容器

完整代码示例 #

CSS样式 #

/* 全局重置+禁用页面滚动 */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

/* 父容器垂直flex布局占满全屏 */
.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* 子容器占满剩余空间，溢出内容隐藏 */
.children {
  flex: 1;
  overflow: hidden;
  width: 100%;
  position: relative;
}

PanZoom配置调整 #

初始化PanZoom时添加边界限制参数，避免内容超出子容器范围：

// 以@panzoom/panzoom库为例
import PanZoom from '@panzoom/panzoom'

const pzElement = document.querySelector('panzoom')
const panzoom = PanZoom(pzElement, {
  contain: 'inside', // 强制内容始终限制在父容器内部
  minScale: 0.2, // 可选：限制最小缩放比例
  maxScale: 4 // 可选：限制最大缩放比例
})

备选方案（menu高度固定场景） #

如果你的menu是固定高度（比如60px），也可以用calc直接计算子容器高度，不需要Flex布局：

.children {
  height: calc(100vh - 60px); /* 60px替换为你的menu实际高度 */
  width: 100vw;
  overflow: hidden;
}

原写法失效原因 #

仅给子元素设置height: 100%时，需要父级元素存在明确的高度值才会生效；且未设置overflow: hidden时，PanZoom内部元素缩放/拖动会撑大子容器的实际尺寸，触发页面滚动条。

内容的提问来源于stack exchange，提问作者JohnW2Smith