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

下面是Html5移动端div固定到底部实现底部导航条的几种方式的完整攻略：

下面是Html5移动端div固定到底部实现底部导航条的几种方式的完整攻略：

一、fixed + bottom

这种方式实现起来非常简单，只需要把需要固定在底部的 div 元素设置为固定定位（fixed），并将它的底部位置设置为 0px 即可。代码示例如下：

<div style="position:fixed; bottom:0;">
  底部导航栏
</div>

需要注意的是，如果页面底部有固定高度的元素（如 footer，或者其它固定高度的 div），需要在底部导航栏的上方留出足够的高度，以免遮挡住底部内容。

二、flex 布局实现

flex 布局可以非常方便地实现底部导航栏，并且也支持一些特殊效果，比如在导航按钮悬停时变色等。代码示例如下：

<div style="display:flex; justify-content:space-between; align-items:center; height:50px;">
  <a href="#">导航 1</a>
  <a href="#">导航 2</a>
  <a href="#">导航 3</a>
</div>

需要注意的是，如果页面中不存在其它高度为 100% 的元素，这种方法能够完美实现底部导航栏。如果页面中存在其它高度为 100% 的元素，则需要使用 calc 函数计算出剩余的高度，并在导航栏容器的样式中设置 height: calc(100% - 底部元素高度)。

以上就是实现 Html5 移动端 div 固定到底部实现底部导航条的几种方式的完整攻略。