Разметка HTML-сетки нарушена дочерним элементом SVG - PullRequest
Новая
       6

Разметка HTML-сетки нарушена дочерним элементом SVG

0 голосов
/ 18 октября 2018

Я пытаюсь сделать страницу с простым 3x3 сеточным макетом: верхний колонтитул, нижний колонтитул, две боковые панели и основной дисплей.Все работает нормально, пока я не добавлю элемент SVG, который должен заполнять div основного дисплея: 

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

На этом этапе вся структура сетки запутывается, браузер удаляет заголовок, расширяя страницу ниже height: 100%, которые я объявил и т. Д.

Я могу легко «исправить» это, установив мои SVG max-height и max-width сколь угодно малыми (ниже ~ 60% в Firefox 62.0.3; в Safari 12.0,<90%).Но это не совсем исправление, поскольку оно оставляет заметный пробел (огромный в Firefox).Я предпочитаю определять размер SVG <code>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>

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Оказывается, проблема вовсе не в элементе 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%;
    }
<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>
0 голосов
/ 18 октября 2018

Пожалуйста, смотрите ниже.Проблем не обнаружено. 

* {
  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...