Добрый день, уважаемые коллеги!
Рисую страницу, у которой есть статические header и footer, а всё пространство между ними должен занимать блок с SVG внутри
<!-- index.php -->
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
...
<body>
<div class="header">
...
</div>
<div class="main">
<div class="content">
<svg id="main_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 132 132">
<use xlink:href="/assets/image/main.svg#common" />
</svg>
</div>
</div>
</div>
<div class="footer">
...
</div>
</body>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html{
color: #fff;
background-color: #000015;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
width: 100%;
flex: 0 0 auto;
}
.main {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
width: 100%;
background: #00000a;
}
@media screen and (orientation : portrait){
.content {
width: 100%;
}
}
@media screen and (orientation : landscape){
.content {
height: 100%;
}
}
При просмотре в портретной ориентации SVG с viewport квадратной формы умещается на экране, но если сменить ориентацию на ландшафтную, блок
content занимает всю ширину экрана и экран становится scrollable. Если убрать SVG, то в ландшафтной ориентации блок
content умещается на экране.
Как можно заставить блок с SVG сжиматься, чтобы умещаться на широком экране?
Простой
Средний