使用Bootstrap container类时如何设置SVG高度适配父级div容器

问题原因 #

你当前的代码里 .svg-container 仅设置了 min-height: 20rem，没有显式声明 height 属性。而CSS规范中，子元素的百分比高度需要基于父元素明确指定的高度值才能生效，因此SVG的height: 100%找不到高度参考基准，无法撑满容器。

解决方案 #

方案1（推荐，适配容器高度动态变化场景） #

给 .svg-container 新增flex布局配置，flex布局下的直接子元素会自动拉伸填满容器高度，即使父元素仅设置min-height也能生效：

.svg-container {
  min-height: 20rem;
  background-color: rgb(211, 201, 219);
  border: solid black 6px;
  /* 新增以下2行 */
  display: flex;
  flex-direction: column;
}

无需修改原有SVG样式即可实现适配。

方案2（固定容器高度场景） #

如果你不需要内层容器高度随内容动态扩展，直接把min-height改成固定height即可：

.svg-container {
  /* 把min-height改成height */
  height: 20rem;
  background-color: rgb(211, 201, 219);
  border: solid black 6px;
}

额外优化建议 #

建议给SVG标签添加viewBox属性定义画布的原始宽高比例，避免拉伸适配时内容变形，示例：

<svg viewBox="0 0 800 600">
  <!-- 你的SVG内容 -->
</svg>

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