保持页脚可见，除非在Android网络上打开虚拟键盘？
保持页脚可见，除非在Android网络上打开虚拟键盘？
提问于 2020-06-18 18:51:50
我需要一个页脚，它总是可见在屏幕上，除非虚拟键盘是打开的。这是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
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-19 18:39:44
下面是一个使用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";
}
}
};
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62457356
复制相关文章
相似问题
腾讯云开发者
