如何将SVG元素的宽高设置为父DIV的scrollWidth和scrollHeight？

问题原因 #

你设置的width=100%和height=100%是基于#scrollable的自身宽高（也就是父容器#frame的20em×10em），而非它的滚动区域实际尺寸（scrollWidth/scrollHeight）。由于绝对定位的#item脱离文档流，不会撑开#scrollable的自身尺寸，只会让滚动区域变大，所以SVG只能覆盖可见区域，超出部分仍显示红色背景。

方法一：纯CSS调整布局 #

通过修改#scrollable的显示方式，让它的自身尺寸自动适配内容（包括绝对定位元素），同时保持在#frame内可滚动：

#frame {
  width: 20em;
  height: 10em;
  border: 1px solid black;
}

#scrollable {
  overflow: scroll;
  position: relative;
  background: rgb(255,0,0,0.2);
  /* 改为inline-block，让自身尺寸由内容决定 */
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
}

#background {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255,255,0,0.2); /* 黄色背景 */
}

#item {
  position: absolute;
  top: 5em;
  left: 15em;
  min-height: 10em;
  min-width: 10em;
  background: rgba(0,0,255,0.2);
  border: 1px solid rgb(0,0,255);
}

HTML保持不变：

<div id="frame">
  <div id="scrollable">
    <svg id="background"></svg>
    <div id="item"></div>
  </div>
</div>

这种方式下，#scrollable的自身尺寸会被内容撑开至滚动区域大小，SVG的百分比尺寸就能完全覆盖整个滚动区域，红色背景消失。

方法二：JavaScript动态设置SVG尺寸 #

如果需要保留原布局，可通过JS实时获取#scrollable的scrollWidth和scrollHeight，赋值给SVG：

#frame {
  width: 20em;
  height: 10em;
  border: 1px solid black;
}

#scrollable {
  min-width: 100%;
  min-height: 100%;
  overflow: scroll;
  position: relative;
  background: rgb(255,0,0,0.2);
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,0,0.2); /* 黄色背景 */
}

#item {
  position: absolute;
  top: 5em;
  left: 15em;
  min-height: 10em;
  min-width: 10em;
  background: rgba(0,0,255,0.2);
  border: 1px solid rgb(0,0,255);
}

HTML不变，添加JS代码：

const scrollable = document.getElementById('scrollable');
const background = document.getElementById('background');

// 更新SVG尺寸
function updateBackgroundSize() {
  background.setAttribute('width', scrollable.scrollWidth);
  background.setAttribute('height', scrollable.scrollHeight);
}

// 初始加载时设置
updateBackgroundSize();

// 监听内容变化，动态更新（如果item是动态添加/修改的）
const observer = new MutationObserver(updateBackgroundSize);
observer.observe(scrollable, { 
  childList: true, 
  subtree: true, 
  attributes: true,
  attributeFilter: ['style', 'class']
});

这个方法会让SVG绝对定位在#scrollable左上角，尺寸完全匹配滚动区域大小，彻底覆盖红色背景。

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