前端ios软键盘样式问题,神坑

初始图,包括头部和尾部
初始图,包括头部和尾部

刚点几次正常,红色底部正常
刚点几次正常,红色底部正常

再点几次就不正常了,红色底部不正常
再点几次就不正常了,红色底部不正常

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">  
<title>Title</title>  
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>  
<style>  
    * {  
        margin: 0;  
        padding: 0;  
    }  

    .top {  
        position: fixed;  
        top: 0;  
        height: 50px;  
        background-color: black;  
        width: 100%;  
    }  

    .but {  
        position: fixed;  
        bottom: 0;  
        height: 50px;  
        background-color: red;  
        width: 100%;  
    }  

    .main {  
        position: absolute;  
        top: 50px;  
        bottom: 50px;  
        width: 100%;  
        /* 使之可以滚动 */  
        overflow-y: scroll;  
        /* 增加该属性,可以增加弹性 */  
        -webkit-overflow-scrolling: touch;  
    }  

    .content {  
        height: 2000px;  
        overflow-y: scroll;  
    }  
</style>  

</head>
<body>
<div class="top"></div>
<div class="main">

<div class="content">  
    <div>1</div>  
    <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div>  
</div>  

</div>
<div class="but"><input type="text" />

<button class="submit">提交</button>  

</div>
</body>
</html>

阅读 3.9k
4 个回答
新手上路,请多包涵

setInterval(function() {

document.body.scrollTop = document.body.scrollHeight

}, 100)

position:fixed的问题,设置个padding或者margin,让页面出现滚动条。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题