我正在尝试制作一个具有简单 3x3 网格布局的页面:页眉顶部、页脚底部、两个侧边栏和主显示。一切正常，直到我添加应该填充主显示 div 的 SVG 元素:
<div class="main">
<svg viewBox="0 0 500 500"></svg>
</div>
此时整个网格布局变得困惑，浏览器删除了标题，将页面扩展到我声明的 height: 100% 下方，等等。
我可以通过将我的 SVG max-height 和 max-width 设置为任意小来轻松“修复”这个问题(在 Firefox 62.0.3 中低于 ~60%；在 Safari 中12.0，<90%)。但这并不是真正的修复，因为它留下了明显的差距(在 Firefox 中是一个巨大的差距)。我更喜欢调整 SVG 100% 的大小以填充其在网格中的空间。我肯定错过了什么。我究竟做错了什么？
编辑:添加我想要的和我拥有的(一个版本)的屏幕截图。
您所看到的样式表如下。两个图像之间的唯一区别是 max-width 和 max-height 从 10% 到 100%.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: grid;
border-style: solid; // to show that body renders improperly
border-color: red;
grid-template-columns: 3fr 9fr 2fr;
grid-template-rows: 1fr 10fr 1fr;
width: 100vw;
height: 100vh;
}
div {
border: solid black 1px; // to show div positions
}
.header {
grid-column: 1 / 4;
grid-row: 1;
}
.main {
grid-column: 2;
grid-row: 2;
}
.side1 {
grid-column: 1;
grid-row: 2;
}
.side2 {
grid-column: 3;
grid-row: 2;
}
.footer {
grid-column: 1 / 4;
grid-row: 3;
}
svg {
max-height: 100%;
max-width: 100%;
}<body>
<div class="header">Header</div>
<div class="side1">Site 1</div>
<div class="main">
<svg viewBox="0 0 500 500"></svg>
</div>
<div class="side2">Site 2</div>
<div class="footer">Footer</div>
</body>最佳答案
事实证明，问题根本不在于 svg 元素，而在于其包含的 div(问题代码片段中的 .main)。与 flex 元素一样，网格元素具有默认的 min-width: auto 和 min-height: auto。通过将它们设置为 0，svg 可以自动调整大小。
我还是不太明白为什么 svg 会打乱布局，尤其是在 Firefox 中设置为 80% 时，会在周围留下显眼的空间，但网格布局本身的问题是够清楚了。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-columns: 3fr 9fr 2fr;
grid-template-rows: 1fr 10fr 1fr;
width: 100vw;
height: 100vh;
}
div {
border: solid black 1px; // to show div positions
}
.header {
grid-column: 1 / 4;
grid-row: 1;
}
.main {
grid-column: 2;
grid-row: 2;
min-width: 0;
min-height: 0;
}
.side1 {
grid-column: 1;
grid-row: 2;
}
.side2 {
grid-column: 3;
grid-row: 2;
}
.footer {
grid-column: 1 / 4;
grid-row: 3;
}
svg {
max-height: 100%;
max-width: 100%;
}<body>
<div class="header">Header</div>
<div class="side1">Site 1</div>
<div class="main">
<svg viewBox="0 0 500 500"></svg>
</div>
<div class="side2">Site 2</div>
<div class="footer">Footer</div>
</body>关于HTML 网格布局被 SVG 子元素打乱，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52868048/