时间戳

首页 > 解决方案 > 为什么溢出可见意味着在 100% 时无法正确计算 svgs 高度 - 在 FireFox 中？

html - 为什么溢出可见意味着在 100% 时无法正确计算 svgs 高度 - 在 FireFox 中？

问题描述

我在绝对定位的 div 中有一个 SVG。div 是一个网格，并设置了宽度和高度。

SVG 的宽度和高度为 100%，并且溢出设置为可见。

如果（例如）父 div 为 150 x 75，我希望 svg 为 150 x 75，而在 Chrome 中确实如此

但是在Firefox中它不是（不确定safari？！），它似乎使高度成为svgs的默认值（如果没有给出尺寸，我相信svgs自然是300x150）

<html>
<head>
<style>
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

svg {
    background-color: green;
    height: 100%;
    width: 100%;
    overflow: visible;
}

#parent{
  position: absolute;
  left: 30px;
  top: 50px;
  width: 150px;
  height: 75px;
display: grid;
}
</style>
</head>
<body>

<div id="parent">
<svg></svg>
</div>
</body>
</html>

标签： htmlcsssvg

解决方案

问题是由于您在网格内使用百分比值，并且百分比将相对于网格轨道而不是网格容器。这将创建一个随机行为，因为我们没有明确定义轨道的大小

一个简单的解决方法是grid-template-rows在高度之外定义具有相同值的 a：

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  background-color: green;
  height: 100%;
  width: 100%;
  overflow: visible;
}

#parent {
  position: absolute;
  left: 30px;
  top: 50px;
  width: 150px;
  height: 75px;
  grid-template-rows: 75px; /* added this*/
  display: grid;
}
<div id="parent">
  <svg></svg>
</div>

类似的问题：为什么我的 Grid 元素的高度没有被正确计算？

推荐阅读