share555

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
AmazingCounters.com
查看: 140|回复: 0

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

[复制链接]

369

主题

731

帖子

2063

积分

金牌会员

Rank: 6Rank: 6

积分
2063
发表于 2021-3-15 09:49:46 | 显示全部楼层 |阅读模式

需求:

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

脚本之家-share555Html5移动端div固定到底部实现底部导航条的几种方式(1)

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

html结构如下:

  1. <div class=&quot;box&quot;>
  2. <div class=&quot;roll&quot;>滚动区域</div>
  3. <footer>底部固定菜单</footer>
  4. </div>
  5. <!---公用样式--->
  6. <style>
  7. html,body{
  8. margin:0;padding:0;height:100%;width:100%;
  9. }
  10. footer{
  11. background:#F2F3F6;max-width: 750px;width: 100%;height: 1rem;
  12. }
  13. </style>
复制代码

方法一:使用fixed

  1. .box{
  2. .roll{
  3. padding-bottom:1rem;
  4. }
  5. footer{
  6. position:fixed;bottom:0;z-index:999;
  7. }
  8. }
复制代码

方法二:使用absolute

  1. .box{
  2. position: relative;height: 100%;
  3. .roll{
  4. position: absolute;bottom:1rem;top: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
  5. }
  6. footer{
  7. position: absolute;bottom:0;
  8. }
  9. }
复制代码

方法三:使用flex

  1. .box{
  2. display:flex;display: -webkit-flex;height:100%;flex-direction:column;
  3. .roll{
  4. flex: 1; width: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
  5. }
  6. }
复制代码

总结

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;会出现滚动条,这时候我们需要全局定义如下样式:

  1. ::-webkit-scrollbar{//scroll滚动条设置
  2. width: 0px; height: 0px; color: rgb(136, 0, 0);&quot;>#fff;
  3. }
复制代码

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

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


来源:https://www.jb51.net/html5/766833.html
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|分享论坛

GMT+8, 2021-6-13 14:12 , Processed in 0.100836 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表