正文

移动端fixed固定按钮在屏幕下方，然后按钮被键盘顶上来...顶上来了有没有~

design-pillar  design-pillar  2022-10-15  597

关键词：

在移动端 H5 页面开发中，我使用了 fixed 固定某个元素在屏幕的最下方，

这时点击输入框，接着非常非常自然地出现了元素被系统键盘顶起来的情况，如下图。

技术分享图片

解决方案:

首先，给页面最外层包裹一层 div(相对定位) ，然后页面渲染完成时给 div 的高度等于 body(document.body.clientHeight) 的高度，

接下来再给需要定位在屏幕下方的元素设置绝对定位即可解决问题。

css

body,html {
    height       : 100%;
}
#view {
    width        : 100%;
    height       : 100%;
    position     : relative;
}
.watch {
    width        : 96% ;
    height       : 30px;
    padding      : 0 2%;
    border       : 1px solid #00a5ba;
    outline      : none;
    border-radius: 4px ;
    overflow-y   : auto;
}
.fixed-btn {
    width        : 92% ;
    height       : 40px;
    background   : #00a5ba;
    border-radius: 4px ;
    /*position     : fixed;*/
    position     : absolute;
    bottom       : 20px;
    left         : 4%  ;
}

html

<div id="view">
    <input type="text" class="watch">
    <div class="fixed-btn"></div>
</div>

var load = document.body.clientHeight
var view = document.getElementById(‘view‘)

window.onload = function () {
    view.style.height = load + ‘px‘
}

我们想要的效果如下图:

技术分享图片

移动端中h5输入框在弹起键盘后被遮挡

参考技术A可见，键盘遮盖住了这个输入框，而且此时不能滚动，而按钮的设计为始终置底置底的按钮为fixed布局，观察得知，这样当键盘弹起时，其实页面的高度被缩短成类似于这样这样，始终置底的元素会遮盖住输入框，并且... 查看详情

vue全家桶开发android和ios移动端应用常见问题解决(代码片段)

1、input获取焦点弹出键盘时遮住input web页面有多个input输入框时，底部的input获取焦点弹出键盘，会出现遮住input情况，用户输入的内容不能正常展示，需要手动上滑。如下图一键盘遮住了备注输入框，图二... 查看详情

关于移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题(代码片段)

varwin_h=$(window).height();//关键代码window.addEventListener(‘resize‘,function()if($(window).height()<win_h)$(‘#footer‘).hide();else$(‘#footer‘).show();); 查看详情

如何使用 SwiftUI 在多个屏幕上获取键盘高度并移动按钮

】如何使用SwiftUI在多个屏幕上获取键盘高度并移动按钮【英文标题】：HowtogetthekeyboardheightonmultiplescreenswithSwiftUIandmovethebutton【发布时间】：2019-09-0112:28:57【问题描述】：以下代码获取键盘显示时的键盘高度，并将按钮移动键盘... 查看详情

移动端-点透问题巧妙解决(代码片段)

移动端经常出现点透，至于怎么出现的请大家去看一下zepto实现tap的源码。1、“点透”是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执... 查看详情

移动端-点透的解决方法(代码片段)

android开发布局：如何在屏幕下方显示一排按钮

...部分都采用Linearlayout方式布局2、下半部分LinearLayout高度固定，上半部分LinearyLayout设置layout_weight权重，占满剩余屏幕空间3、下半部分LinearLayout中添加按钮，就是把按钮放到了底部<LinearLayout><LinearLayoutandroid:layout_height="w... 查看详情

mui底部按钮问题,使按钮一直在屏幕下端固定不动，中间内容上下滑动

按钮:position:‘fixed‘,bottom:0;如果按钮覆盖了容器的内容，容器加个padding-bottom就行了容器:padding-bottom:100px;这样的话，按钮会固定在手机屏幕的底部，如果要居中的话要设置按钮margin:auto;left:0;right:0; 查看详情

移动端页面input输入框被键盘遮挡问题

<bodyclass="layout-fixed"><header></header><main></main><footer><inputtype 查看详情

移动端fixed定位固定在底部ios手机里为啥会遮住一半css

参考技术Afixed不占据文档流。你可以让bodypadding-top一个底部foot的高度就行了本回答被提问者采纳参考技术Bfixed固定在底部的是不是input标签？查看详情

vue移动端点击输入框，弹出键盘，底部被顶起的问题(代码片段)

问题描述：Vue开发中，当我们相对于父视图的底部布局子控件时，需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框... 查看详情

如何在移动设备上将现有按钮固定到底部？（引导）

】如何在移动设备上将现有按钮固定到底部？（引导）【英文标题】：Howtofixanexistingbuttontothebottomonmobile?(bootstrap)【发布时间】：2022-01-2020:38:55【问题描述】：我在列的容器中有一个现有按钮。我需要将其从桌面上的正常位置更... 查看详情

移动端键盘顶起遮挡输入框

先上图通常在开发中我们会遇到这样输入框被遮挡的问题，那么该怎么解决呢？方案一（兼容性优先）：首先，把置底元素设置成，在页面的底部而非屏幕的底部.page.bottomposition:absolute;bottom:0;width:100%;border:0;text... 查看详情

关于移动端底部定位问题

移动端的页面有些内容是需要固定在底部，一般会采用fixed，当页面中input获取到焦点的时候，这时候底部的内容就会被顶上来如果是按钮被顶上来，有时候不会影响页面效果，可是当底部是一些广告或者注意事项的时候，这时... 查看详情

常见的移动端布局方案有哪些？原理如何？

1）固定布局：设置viewport，布局与pc端一样，设假设整个网页的宽度为320px居中即可，超出部分留白。优点：思路沿用PC端，上手简单。缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操... 查看详情

实现移动端顶部与底部固定，内容区优化的效果

实现顶部与底部固定的效果十分容易，且很多人都会选择用这个方式，就是顶部position:fixed，底部也position:fixed。实现的效果就像下面两张图，container区域是布满整个屏幕的，且滚动条也是滚动在整个屏幕中，调内容区时只能调... 查看详情

开发移动端web应用,使用手机自带键盘的搜索按钮

很多时候在移动端的web页面中,需要使用搜索功能,然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮,这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索虽然不是什么大的功能,但是确实很实用, 实现... 查看详情

根据设备调整按钮宽度和高度

...让它只占用垂直屏幕空间的1/2。使用约束，我将左下按钮固定在屏幕的左侧和底部，将右下按钮固定在屏幕的底部和右侧。我设置了左侧按钮查看详情

正文