如何实现div内SVG随浏览器窗口垂直自动缩放？

问题背景 #

现有如下HTML结构：

...
<body>
  <div>
    ...
  </div>
  <div>
    ...
  </div>
  <div style="height:***">
    <svg width="100%" height="100%">
      ...
    </svg>
  </div>
</body>

当前问题：窗口水平调整时，最后一个包含SVG的div和SVG宽度能自动缩放，但垂直调整时高度无变化。需要解决两个问题：

1. 用CSS让该div高度恰好填充浏览器窗口剩余可见空间（无垂直溢出），使SVG垂直缩放；
2. 若CSS无法实现，用JS实现精确高度计算的方案。

1. CSS 实现方案 #

推荐两种现代布局方案，无需JS即可实现：

方案一：Flexbox 布局 #

给<body>设置垂直方向的Flex布局，让其占满视口高度，再让最后一个div自动填充剩余空间：

/* 全局基础样式，清除默认margin避免布局偏移 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 最后一个div自动填充剩余空间 */
body > div:last-child {
  flex: 1;
  /* 可选：如果容器有内边距/边框，开启box-sizing避免溢出 */
  box-sizing: border-box;
}

前置div会正常占据自身高度，最后一个div会自动填充视口剩余空间，窗口垂直调整时高度同步变化，SVG因设置height:100%会跟着缩放。

方案二：Grid 布局 #

给<body>设置Grid布局，指定前两个div为自动高度，最后一个div占剩余空间：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

该方案逻辑更直观，同样能让最后一个div自动适配剩余高度，SVG同步缩放。

2. JavaScript 后备方案 #

如果存在兼容性限制或特殊布局场景无法用CSS，可通过JS实现：

监听事件 #

监听window的resize事件，同时页面初始化时立即执行一次高度计算。

核心代码 #

function updateSvgContainerHeight() {
  const body = document.body;
  const svgContainer = body.querySelector('div:last-child');
  if (!svgContainer) return;

  // 获取当前视口高度
  const viewportHeight = window.innerHeight;
  // 计算所有前置div的总占用高度（含margin、padding、border）
  let totalPrevHeight = 0;
  const prevDivs = body.querySelectorAll('div:not(:last-child)');
  prevDivs.forEach(div => {
    const rect = div.getBoundingClientRect();
    totalPrevHeight += rect.bottom - rect.top;
  });

  // 计算body的上下内边距+外边距总和
  const bodyStyle = getComputedStyle(body);
  const bodyVerticalSpacing = parseInt(bodyStyle.paddingTop) + parseInt(bodyStyle.marginTop) +
                             parseInt(bodyStyle.paddingBottom) + parseInt(bodyStyle.marginBottom);

  // 计算容器高度，确保不出现负数
  const containerHeight = viewportHeight - totalPrevHeight - bodyVerticalSpacing;
  svgContainer.style.height = Math.max(containerHeight, 0) + 'px';
}

// 页面加载时初始化高度
updateSvgContainerHeight();
// 监听窗口尺寸变化，实时更新高度
window.addEventListener('resize', updateSvgContainerHeight);

通过getBoundingClientRect()能准确获取前置元素的实际占用空间，避免因边框、内边距、外边距导致的计算误差，确保容器高度恰好填充剩余空间且无溢出。

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