如何让底部导航栏（bottom nav bar）铺满页面底部空白区域

针对你要让底部导航栏填充页面底部空白的需求，这里提供几种常用的实现方案：

• CSS原生固定定位方案
  直接把导航栏固定在页面底部，不管页面内容多少都贴底：

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* 按需调整导航栏高度 */
  background-color: #fff; /* 适配你的设计风格 */
  border-top: 1px solid #eee;
}

注意：如果页面内容较长，要给页面主体加底部内边距，防止内容被导航栏挡住：

body {
  padding-bottom: 60px; /* 值和导航栏高度一致 */
}

• CSS原生粘性自适应方案
  如果想让导航栏在内容不足时贴底，内容足够时随页面滚动，用flex布局实现：

html, body {
  height: 100%;
  margin: 0;
}
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-content {
  flex: 1; /* 让内容区域自动填充剩余空间 */
}
.bottom-nav {
  height: 60px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

对应的HTML结构：

<div class="page-container">
  <main class="page-content">页面主要内容</main>
  <nav class="bottom-nav">底部导航栏</nav>
</div>

• Bootstrap框架快速实现
  用Bootstrap的内置类直接搞定：

<nav class="navbar fixed-bottom navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

同样需要给body加底部内边距，避免内容被遮挡：

body {
  padding-bottom: 56px; /* Bootstrap默认导航栏高度为56px */
}

内容的提问来源于stack exchange，提问作者Deepak Jain