本文主要介绍了几种将Html5 mobile div固定在底部实现底部导航栏的方法。通过示例代码详细介绍，对大家的学习或工作有一定的参考学习价值。让我们和边肖一起学习。

要求：

需要在底部固定导航？只能滑动内容，导航菜单固定。效果如下：

本文主要阐述了三种实现方案，包括：css3的固定布局、绝对布局和灵活布局。

Html结构如下：

div class='box '

Div class='roll '滚动区域/div

页脚底部固定菜单/页脚

/div

！-普通风格-

风格

html，body{

Mar唐山seo公司gin:0padding:0高度：100%；宽度：100%；

}

页脚{

background: # F2F3F6最大宽度： 750 px；宽度：100%；height: 1rem

}

/style

方法1:使用固定。box{。滚动{

padding-bottom :1 rem；

}

页脚{

位置：固定；bottom:0z-index :999；

}

}

方法2:使用绝对。box{

相对位置：高度：100%；滚动{

绝对位置：bottom:1remtop : 0；overflow-y:卷轴；-web kit-overflow-scrolling : touch；height: auto

}

页脚{

绝对位置：bottom:0

}

}

方法3:使用弹性。box{

display:flexdisplay :-web kit-flex；高度：100%；flex-direction :柱；滚动{

flex : 1；宽度：100%；overflow-y:卷轴；-web kit-overflow-scrolling : touch；height: auto

}

}

总结

1.当底部被定位为固定或绝对时，优先级较低，这导致被其他div覆盖，因此这里需要z-index使其成为最高级别而不被覆盖。

2.底部定位为固定或绝对。当有输入框时，会出现以下情况：

Ios:输入框激活时，底部不会弹出(合理)。

Android:输入框激活时，底部会随输入框一起弹出(不合理)

传统解决方案：底部通常设置为固定，激活输入框后，底部定位改为相对，兼容ios和Android。

3.要使用方法2或方法3，您需要设置-webkit-overflow-scrolling属性。这样可以保证滚动区域的流畅度。-webkit-overflow-scrolling控制元素是否在移动设备上使用滚动反弹效果。

4.在某些浏览器中设置溢出-y:滚动；滚动条将会出现。此时，我们需要全局定义以下样式：

:-WebKit-scroll bar {//scroll bar设置

宽度： 0px；height: 0pxcolor: rgb(136，0，0)；# fff

}

5.移动终端推荐采用方法3的布局形式。

至此，本文介绍了如何将Html5移动终端的div固定在底部，实现底部导航栏。有关Html5底部导航栏的更多信息，请搜索Script House以前的文章或继续浏览下面的相关文章。希望以后大家多多支持脚本屋！