Актвиный инпут сдвигает верстку | JS | Mobile | IOS
Если инпут расположени снизу экрана, то при его активации клавиатура не уменьшает центральную часть (которая скроллится), а смещает весь макет вверх. Как мне это исправить?
Пытался использовать visibleViewport, но от него идет другая проблема: html менят свой размер, тем не менее сайт все ещё позволяет скроллить вниз (в пустоту).
Пример тут: https://codepen.io/sirexelite/pen/LYJzvaR
Для любителей кода:
html, body {
height: calc(var(--vh, 1vh) * 100);
width: 100vw;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background: #333;
position: relative;
}
.header {
height: 40px;
background: red;
width: 100%;
}
.inner {
overflow: hidden;
overflow-y: scroll;
max-height: calc(100% - 80px);
background: green;
width: 100%;
}
.inner > div {
height: 3000px;
}
.footer {
height: 40px;
background: blue;
width: 100%;
}
input {
margin-top: auto;
width: 100%;
height: 30px;
}<div class="container">
<div class="header">HEADER</div>
<div class="inner">
<div>INNER</div>
</div>
<div class="footer">
<input type="text">
</div>
</div>