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的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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 不使用js实现页面跳转
2014/02/11 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
详解Python中的测试工具
2019/06/09 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python tkinter实现连连看游戏
2020/11/16 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
测绘工程个人的自我评价
2013/11/23 职场文书
5.1手机促销活动
2014/01/17 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
政风行风整改报告
2014/11/06 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
英语感谢信范文
2015/01/20 职场文书
财务人员入职担保书
2015/09/22 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
《给予树》教学反思
2016/03/03 职场文书
Node.js实现断点续传
2021/06/23 Javascript
Python 数据可视化之Seaborn详解
2021/11/02 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript