解决：H5端的脚部被键盘顶起来

最新推荐文章于 2025-06-03 16:39:46 发布

咚咚--梅

最新推荐文章于 2025-06-03 16:39:46 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_37252374/article/details/101727399

最近在项目上发现一个bug，在h5端一在input中输入，脚部就会被键盘顶起来，原因是脚部用了定位，才导致布局乱了。
最后，我把脚部的定位去掉改成这样

<script>
    $(function () {
        var h = $(window).height() + "px"
        $("div").css("height",h);
    })
</script>

<body>
<section>
    <header>我是头部</header>
    <div>我是内容</div>
    <footer>我是脚部</footer>
</section>
</body>

<style>
    section{
        width: 100%;
    }
    /*最外面的父盒子，要给高度*/
    header{
        height: 50px;
    }
    div{
        height: calc(100% - 50px - 100px);
    }
    footer{
        height: 100px;
    }
</style>

解决了！