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实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
CSS 制作波浪效果的思路
May 18 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使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
vue实现分页栏效果
2019/06/28 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python如何对实例属性进行类型检查
2018/03/20 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
《黄山奇石》教学反思
2014/04/19 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
跑吧孩子观后感
2015/06/10 职场文书
周一给客户的问候语
2015/11/10 职场文书
执行力心得体会范文
2016/01/11 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL