Question

我正在尝试制作一个具有简单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%的大小以在网格中填充其空间。我肯定错过了什么。我究竟做错了什么？

编辑：添加一张我想要的和我所拥有的（一个版本）的屏幕截图。

Here是我所拥有的。 Here是我想要的。

您所看到的样式表如下。这两张图片之间的唯一区别是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>

Answer 1

请参阅下文。没有遇到任何问题。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 3fr 9fr 2fr;
  grid-template-areas: "header header header" "side1 main side2" "footer footer footer";
}

.wrapper>div {
  border: thin solid black;
  /* For visibility only */
}

.header {
  grid-area: header;
}

.side1 {
  grid-area: side1;
}

.main {
  grid-area: main;
}

.side2 {
  grid-area: side2;
}

.footer {
  grid-area: footer;
}

<div class="wrapper">
  <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>
</div>

Answer 2

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

我仍然不太明白为什么svg会破坏布局，尤其是在Firefox中将其设置为80%时，在其周围留有明显的空间，但是网格布局本身的问题很明显。 / p>

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

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

2 个答案: