100vw/100vh父容器无法容纳子元素时如何自动缩放子元素适配非交互页面

方案1：纯CSS实现（子元素高度固定场景） #

适用所有子元素高度统一的场景，无需写JS逻辑：

1. 父容器基础样式：

.parent {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 自定义变量：单个子元素的固定高度，按需修改 */
  --single-child-height: 50px;
}

2. 子元素样式：

.child {
  height: var(--single-child-height);
  width: 100%;
  transform-origin: top center;
  /* 自动计算缩放比例：父容器高度 / 所有子元素总高度 */
  transform: scale(calc(100vh / (var(--child-num) * var(--single-child-height))));
}

3. 动态更新逻辑：每次新增/删除子元素时，给父容器设置--child-num CSS变量，值为当前子元素总数即可，比如有8个子元素就设置：parent.style.setProperty('--child-num', 8)，框架开发时直接绑定变量即可。

方案2：JS动态计算（全场景通用） #

适用于子元素高度不固定、布局复杂的场景，适配精度最高：

1. 基础CSS样式：

.parent {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.child {
  transform-origin: top center;
  /* 缩放比例由JS动态注入 */
  transform: scale(var(--scale-rate, 1));
}

2. JS逻辑：监听子元素变动，自动计算缩放比例

const parentEl = document.querySelector('.parent');

// 监听子元素增删，自动触发适配
const mutationObserver = new MutationObserver(adjustScale);
mutationObserver.observe(parentEl, { childList: true, subtree: true });

// 页面加载完成先执行一次适配
window.addEventListener('load', adjustScale);

function adjustScale() {
  // 临时放开溢出限制，获取内容实际总高度
  parentEl.style.overflow = 'visible';
  const parentActualHeight = parentEl.clientHeight;
  const contentTotalHeight = parentEl.scrollHeight;
  const heightScale = parentActualHeight / contentTotalHeight;
  // 计算缩放比例，内容未超出时不缩放（用1）
  const scaleRate = Math.min(1, heightScale);
  // 注入缩放变量
  parentEl.style.setProperty('--scale-rate', scaleRate);
  parentEl.style.overflow = 'hidden';
}

扩展说明 #

• 如果需要同时适配宽度溢出的场景，只需要在adjustScale函数中补充宽度的计算逻辑，取高和宽两个缩放比例的最小值即可：

  const contentTotalWidth = parentEl.scrollWidth;
  const widthScale = parentEl.clientWidth / contentTotalWidth;
  const scaleRate = Math.min(1, heightScale, widthScale);
  

• transform-origin设置为top center是为了保证内容从顶部开始排布，避免缩放后出现上下偏移或留白。

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