Flex布局实现底部导航固定与内容自适应

从现在开始，我们要努力学习啦！今天我给大家带来《flex布局实现底部导航栏固定与内容自适应》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

底部导航栏应采用flex布局实现视觉固定而非position:fixed；通过min-height:100vh、flex-direction:column、justify-content:space-between及显式高度设置，确保内容不被遮挡且自适应。

底部导航栏固定在视口底部，但内容不被遮挡

直接用 position: fixed 会让导航栏脱离文档流，导致页面内容上移、被遮盖。真正要的是「视觉固定 + 内容留白」，而不是单纯压在最底下。

• 给 body 或主容器设 display: flex; flex-direction: column; min-height: 100vh
• 让主要内容区域用 flex: 1 占满剩余空间，自然撑开高度
• 底部导航栏不设 fixed，而是作为 flex 容器的最后一个子元素，靠 margin-top: auto 或 align-self: flex-end 推到底部（更推荐前者）

用 justify-content: space-between 把导航栏“推”到最底

当父容器是 flex 且 flex-direction: column 时，justify-content 控制的是**主轴方向（垂直方向）**上的对齐——也就是上下间距分配。它本身不会让导航栏“固定”，但能确保它始终贴着容器底部，哪怕内容很少。

• 只在父容器上设置 justify-content: space-between，不要在导航栏自身设
• 必须保证父容器高度至少为 100vh，否则没空间可分
• 如果内容很多导致滚动，导航栏会随滚动消失——这不是 bug，是预期行为；要「始终可见」才需 fixed

flex 布局下，导航栏高度影响内容区域自适应

导航栏高度必须可预测（比如固定 height: 60px 或 min-height），否则 flex: 1 的计算会出问题，尤其在 iOS Safari 中容易出现空白或溢出。

• 避免用 height: auto + flex: 1 组合，会导致布局抖动
• 推荐显式写 height: var(--nav-height, 60px)，并在 :root 中定义变量便于维护
• 如果导航栏内有文字或图标，记得加 box-sizing: border-box，防止 padding/border 溢出高度

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  overflow-y: auto;
}

.nav-bar {
  height: 60px;
  background: #fff;
  border-top: 1px solid #eee;
}

底部导航栏是否“固定可见”，取决于你想要的是「视觉锚定」还是「绝对定位覆盖」；前者靠 flex 布局留白实现，后者才用 fixed —— 两者不能混用，否则高度计算冲突，iOS 上尤其容易出空隙或重叠。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~