Html5移动端div固定到底部实现底部导航条的几种方式


Posted in HTML / CSS onMarch 09, 2021

需求:

需要把导航固定在底部?只能滑动内容,导航菜单固定不动的。效果如下:

Html5移动端div固定到底部实现底部导航条的几种方式

这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及css3的flex布局。

html结构如下:

<div class="box">
    <div class="roll">滚动区域</div>
    <footer>底部固定菜单</footer>
</div>
<!---公用样式--->
<style>
html,body{
    margin:0;padding:0;height:100%;width:100%;
}
footer{
    background:#F2F3F6;max-width: 750px;width: 100%;height: 1rem;
}
</style>

方法一:使用fixed

.box{
        .roll{
            padding-bottom:1rem;
         }
    footer{
        position:fixed;bottom:0;z-index:999;
    }
}

方法二:使用absolute  

.box{
    position: relative;height: 100%;
    .roll{
        position: absolute;bottom:1rem;top: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
    }
    footer{
        position: absolute;bottom:0;
    }
}

方法三:使用flex 

.box{
    display:flex;display: -webkit-flex;height:100%;flex-direction:column;
    .roll{
        flex: 1; width: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
    }
}

总结

1、底部定位为fixed或absolute的时候,出现优先级别较低,导致被其他div覆盖的情况,那么这里就需要用到z-index,来让他成为最高级别,不至于被覆盖。

2、底部定位为fixed或absolute,存在输入框的时候,会出现如下情况:

ios:激活输入框时,底部不会弹出来(合理)。
Android:激活输入框时,底部会跟着输入框弹出来(不合理)  

传统解决办法:通常将底部设置为fixed,当激活输入框的时候,将底部定位改为relative,即可兼容ios和Android。

3、使用方法二或者方法三,需要设置-webkit-overflow-scrolling 属性。这样才能保证滚动区域的流畅性,-webkit-overflow-scrolling控制元素在移动设备上是否使用滚动回弹效果。

4、在部分浏览器中设置overflow-y: scroll;会出现滚动条,这时候我们需要全局定义如下样式:

::-webkit-scrollbar{//scroll滚动条设置
        width: 0px; height: 0px; color: rgb(136, 0, 0);">#fff; 
}

5、移动端推荐使用方法三的布局形式。

到此这篇关于Html5移动端div固定到底部实现底部导航条的几种方式的文章就介绍到这了,更多相关Html5底部导航条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 #HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 #HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 #HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 #HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 #HTML / CSS
canvas版人体时钟的实现示例
Jan 29 #HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 #HTML / CSS
You might like
虫族 Zerg 热键控制
2020/03/14 星际争霸
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python实现控制台进度条功能
2016/01/04 Python
通过python爬虫赚钱的方法
2019/01/29 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
保险公司早会主持词
2014/03/22 职场文书
留学顾问岗位职责
2014/04/14 职场文书
初中生期末评语大全
2014/04/24 职场文书
党员个人党性分析材料
2014/12/18 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
python自动化八大定位元素讲解
2021/07/09 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers