本文主要介绍Html5 mobile div固定在底部实现底部导航栏的几种方式。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
需求：
需要修复底部的导航？只能滑动内容，但导航菜单是固定的。效果如下：
本文主要解释三种实现方案，包括：固定、绝对和css3的flex布局。
Html具有以下结构：
div class=’box ‘
Class=’ roll ‘滚动区/分区
页脚底部固定菜单/页脚
/div
！-公共风格-
风格
html，正文{
边距：0；填充：0；身高：100%；宽度：100%；
}
页脚{
背景：# F2F3F6最大宽度：750像素；宽度：100%；身高：1雷姆；
}
/风格
方法1:使用固定。方框{。滚动{
底部填充：1个；
}
页脚{
位置：固定；底部：0；z指数：999；
}
}
方法2:使用绝对。方框{
位置：相对；身高：100%；滚动{
位置：绝对；底部：1雷姆；top:0；溢出-y:滚动；-WebKit-溢出-滚动：触摸；高度：自动；
}
页脚{
位置：绝对；底部：0；
}
}
方法3:使用flex。方框{
显示器：flex显示：-WebKit-flex；身高：100%；伸缩方向：列；滚动{
flex:1；宽度：100%；溢出-y:滚动；-WebKit-溢出-滚动：触摸；高度：自动；
}
}
摘要
1.当底部被定位为固定或绝对时，优先级较低，导致被其他div覆盖。那么，这里就需要z-index，使其达到最高级别，不被覆盖。
2.底部位置是固定的或绝对的。当有输入框时，会出现以下情况：
Ios:输入框激活时，底部不会弹出(合理)。
安卓：输入框激活时，底部会弹出输入框(不合理)
传统解决方案：通常将底部设置为固定，在输入框激活时，将底部定位改为相对，可以兼容ios和Android。
3.要使用方法2或方法3，需要设置-webkit-overflow-scrolling属性。这样可以保证滚动区域的流畅性。-webkit-overflow-scrolling控制元素是否在移动设备上使用滚动反弹效果。
4.设置overflow-y:在某些浏览器中滚动；滚动条会出现，此时我们需要全局定义以下样式：
:-WebKit-scroll bar {//滚动条设置
宽度：0px高度：0px颜色：rgb(136，0，0)；# fff
}
5.移动终端推荐方法3的布局形式。
关于如何将Html5 mobile div固定在底部实现底部导航栏的这篇文章到此为止。关于Html5底部导航栏的更多信息，请搜索脚本之家之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/html5/766833.html
