SVG子元素破坏了HTML网格布局

Question

SVG子元素破坏了HTML网格布局

我正在尝试制作一个具有简单3x3网格布局的页面：页眉顶部，页脚底部，两个侧边栏和主显示。一切正常，直到我添加应填充主显示div的SVG元素：

<div class="main">
  <svg viewBox="0 0 500 500"></svg>
</div>

Run Code Online (Sandbox Code Playgroud)

此时，整个网格布局变得混乱，浏览器删除了标题，将页面扩展到了height: 100%我声明的页面之下，等等。

我可以很容易地“固定”这通过设定我的SVG max-height和max-width任意小（低于〜60％在Firefox 62.0.3;在Safari 12.0，<90％）。但这并不是真正的解决方法，因为它留下了明显的差距（在Firefox中是一个巨大的差距）。我更喜欢调整SVG的大小100%以填充网格中的空间。我肯定错过了什么。我究竟做错了什么？

编辑：添加我想要的（我的一个版本）的屏幕快照。

这就是我所拥有的。这就是我想要的。

您所看到的样式表如下。唯一的两个图像之间的区别是在变化max-width和max-height从10%到100%。

<div class="main">
  <svg viewBox="0 0 500 500"></svg>
</div>

Run Code Online (Sandbox Code Playgroud)

    * {
      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%;
    }

Run Code Online (Sandbox Code Playgroud)

Answer 1

M-N*_*M-N 6

事实证明，问题根本不在于 svg 元素，而在于其包含的 div （.main在问题的代码片段中）。与弹性项目一样，网格项目也有默认值min-width: auto和min-height: auto。通过将它们设置为0，svg 能够自动调整大小，正如它应该的那样。

我仍然不太明白为什么 svg 会扰乱布局，尤其是80%在 Firefox 中设置为，在其周围留下显眼的空间，但网格布局本身的问题已经足够清楚了。

    * {
      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%;
    }

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，4 月前
查看次数：	1333 次
最近记录：	7 年，4 月前