Макет сетки HTML нарушен дочерним элементом SVG
Я пытаюсь создать страницу с простым макетом сетки 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 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>вам просто нужно preserveAspectRatio = "none" в вашем элементе svg?
@RobertLongson, который, к сожалению, не работает; как и другие значения preserveAspectRatio.
Пожалуйста, добавьте минимальный воспроизводимый пример, затем
@RobertLongson код в ответе Джерарда ниже на самом деле иллюстрирует мою проблему, но я обновил свой пост, включив в него минимальный HTML. Не знаю, что еще было бы полезно.
Ответы 2
См. Ниже. Проблем не обнаружено.
* {
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>Прошу прощения за предположение, что ваш код проиллюстрировал мою проблему. Это не так по той простой причине, что в нем не указывается высота сетки. Если вы посмотрите мой исходный пост, я обновил его фрагментом кода, который должен более конкретно проиллюстрировать проблему, с которой я столкнулся. Однако я нашел решение. Спасибо за вашу помощь!
Оказывается, проблема вовсе не в элементе 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>странный. У меня аналогичная проблема, но это не решает проблему для меня. как ни странно, я не видел проблемы, пока не проверил свой код в браузере для настольных ПК, то есть в мобильном браузере (или в мобильном режиме в браузере для настольных ПК) он отображается просто отлично!
Можешь поделиться снимком экрана, с какой проблемой ты столкнулся?