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 相关文章推荐
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
javascript date格式化示例
2013/09/25 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
开水果连锁店创业计划书
2013/12/29 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
工程业务员岗位职责
2013/12/31 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
老同学聚会感言
2014/02/23 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android