Мне нужен нижний колонтитул, который всегда отображается на экране, кроме случаев, когда виртуальная клавиатура открыта. Это поведение по умолчанию на iOS, однако на Android нижний колонтитул поднимается над клавиатурой. Можно ли это предотвратить?
<div class="cont">
<input />
<input />
<!-- Lots more inputs -->
</div>
<p class="footer">Footer</p>
.cont {
display: flex;
flex-direction: column;
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: blue;
color: white;
text-align: center;
height: 50px;
line-height: 50px;
}
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/qBbROeG
0
18 Июн 2020 в 21:51
1 ответ
Лучший ответ
Вот демонстрация с использованием Jquery : https://codepen.io/nomi9995 / pen / ZEQLyyy
Вот демонстрация с использованием Javascript : https://codepen.io/nomi9995 / pen / eYJgLbo
Собственно при открытии клавиатуры. это resize экран. мы можем определить размер экрана и дать bottom для auto, когда клавиатура открыта, и дать нижнюю часть для 0, когда клавиатура закрыта
JQuery
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var sumedges = $(window).width() + $(window).height();
$(window).resize(function () {
if ($(window).width() + $(window).height() < sumedges) {
$(".footer").css("bottom", "auto");
} else {
$(".footer").css("bottom", "0");
}
});
}
Javascript
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var sumedges = window.innerWidth + window.innerHeight;
window.onresize = function () {
if (window.innerWidth + window.innerHeight < sumedges) {
const footerArr = document.getElementsByClassName("footer");
for (let i = 0; i < footerArr.length; i++) {
footerArr[i].style.bottom = "auto";
}
} else {
const footerArr = document.getElementsByClassName("footer");
for (let i = 0; i < footerArr.length; i++) {
footerArr[i].style.bottom = "0";
}
}
};
}
0
20 Июн 2020 в 19:34
En Español