我在绝对定位的div中有一个SVG。 div是一个网格,并设置了宽度和高度。
SVG的宽度和高度为100%,并且溢出设置为可见。
如果(例如)父div为150 x 75,我希望svg为150 x 75,而在Chrome中确实如此
但是在Firefox中不是这样(不确定野生动物园吗?!),这似乎使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>
答案 0 :(得分:1)
此问题是由于您在网格内部使用百分比值,并且该百分比将相对于网格轨迹而不是网格容器。由于我们没有明确定义音轨的大小,因此这将产生 random 行为
一个简单的解决方法是在高度相同的情况下定义一个grid-template-rows
:
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>
相似的问题:Why is my Grid element's height not being calculated correctly?