关于移动端底部定位问题

移动端的页面有些内容是需要固定在底部,一般会采用fixed,当页面中input获取到焦点的时候,

这时候底部的内容就会被顶上来

如果是按钮被顶上来,有时候不会影响页面效果,可是当底部是一些广告或者注意事项的时候,这时候这种效果就不行了。

解决办法,:

.mdfMessageBtn{    width:100%;    height:50px;    background-color: #ffb000;    color:#fff;    position:absolute;    bottom:0;    font-size: 16px;}html:
<div class="userContainer" style="position: relative; ">
  <button class="mdfMessageBtn">立即支付</button>
</div>
js:
loadBtn(".userContainer",".mdfMessageBtn");/*按钮定位*/function loadBtn(boot,loat){    var height=$(window).height();    $(boot).css("min-height",height);    var uHeight=$(boot).height();    if(uHeight<=height){

   }else{        $(loat).css({"position":"relative"})
    }};给按钮绝对定位,给其父级相对定位,获取屏幕高度,让其父级的最小高度为屏幕的高度,
时间: 2024-11-05 18:46:25

关于移动端底部定位问题的相关文章

spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果

由于手机的携带的方便性和手机的越来越智能和移动网速越来越快,手机已经充斥着人们的生活.随着手机的流行, 移动应用也快速的火了起来比如微商城.手机网页.移动APP等等.既然移动应用这么火,我们今天来讲一下怎样实现在移 动网页中动态加载数据,那么我们怎么实现呢,是像pc网页那样,有个上一页和下一页还是其它的方式. 其实像pc网页那样上一页和下一页肯定不行的,手机屏幕很小,不好点击同时用户体验很差,今天来给大家介绍使用 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的方式

移动端底部导航栏固定——兼容IOS

问题:移动端前端底部导航栏设计 兼容安卓下的各种浏览器和IOS自带的Safari,但是不兼容苹果下的 钉钉. 具体代码格式: <body> <!-- 头部导航栏 --> <div class="header">内容</div> <!-- 内容 --> <div class="content">内容</div> <!-- 底部导航栏 --> <div class=&q

移动端底部被输入法顶起的解决办法

在微信端时发现固定在底部的按钮在页面调用输入法的时候会被顶起来,多次测试发现只是在安卓上面,听说ios有时也会,不过没遇见,最后采用的方法是不给底部设定固定绝对定位,直接采用计算clientHeight来确定底部的位置,简单来说就是把底部撑到固定的位置, 下面是HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

网页中的foot底部定位问题

有时候,我们会碰到这样一个问题. 网页底部一般有个foot对吧,放置一些友情链接版权声明什么的,这个模块是如何定位的? 要是直接放内容区域的下面的话,假如是内容区域的高度不够的话,那么foot下面是会留有很多空白的: 好了,这时你会说直接相对body定位到底部,那么当内容区域的高度多的话或用户把浏览器放小看的话,部分内容是会被遮住了的. 这里我们可以有个方法解决这问题,通过::after伪元素撑起footer的高度,然后margin-bottom一个负值吃掉这个::after元素的高度. htm

移动端底部input被弹出的键盘遮挡

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView 移动端input被键盘遮挡,事件是跳到可视区域! document.querySelector('#inputId').scrollIntoView(); //只要在input的点击事件,或者获取焦点的事件 还有一个事件是指定在上方或下方 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/s

移动端底部基于mui的加入购物车相关的事件

header头部样式文件导入 <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/> <link rel="stylesheet" href="css/mui.min.css"> <script src="js/jquery-3.4.1.js" type="t

Python: PDB命令

1. where(w) 找出当前代码运行位置 2. list(l) 显示当前代码的部分上下文 3. list <line number> 显示指定行的上下文 4. list <line number1, line number2> 显示指定开始行到结束行的代码 5. up(u) 返回上个调用点 6. down(d) 返回下个调用点 7. args(a) 显示当前所有变量 8. print(p) 打印表达式结果 9 ! 运行python命令,比如!test='hello' 将会把te

TERSUS画画一样开发软件 显示元件介绍-子页面及弹窗显示元件

TERSUS无代码手机电脑管理类软件开发,其中窗口类显示元件包括:子页面元件(Page Dialog).弹窗显示元件(Modal Dialog) 子页面元件(Page Dialog):是手机和平板移动端设计时所用到的新页面元件,移动端是由各个页面所组成的,在按钮等元件中放置一个页面,前端用户在点击按钮时,就会以新的页面覆盖旧页面,首页中,可以并列显示多个页面,如下: 1.页面元件一般有个头部和主内容区,头部中也有默认元件,所有元件,包括页面元件都可以单独定义显示样式"html.style&quo

vue-router点击菜单栏同一个模块报错 ———— Uncaught(in promise) NavigationDuplicated error .......

在做移动端底部导航时,鼠标双击各个选项会报如下错误,但是单击时不会出现任何问题. 出现这个bug的原因就是vue-router版本问题,vue-router 3.0版本以上的回调形式是promise api的形式,返回的是一个promise,如果没有捕获到错误,控制台始终会出现上图的警告: 解决方法之可以是安装低版本的vue-router或者捕获抛出放入错误: 解决方法大概包括以下3种解决方法: 1)删除node_modules文件夹,然后使用“cnpm install”重新安装依赖(ps:尝试