使用flex-direction: column-reverse时Navigation组件消失，需实现底部导航

我来帮你搞定这个底部导航栏的需求～咱们先排查问题根源，再一步步修正：

问题分析 #

你遇到的两个现象其实和两个小细节有关：

1. CSS笔误：你写的min-width: 100vh是错误的——vh是高度单位，用来设置宽度会导致容器宽度异常，应该改成min-height: 100vh，这样才能让.app容器占满整个视口高度。
2. Flex布局属性缺失：没有给内容区域（.route__wrapper）设置flex: 1，导致当你用column-reverse时，导航栏被内容区域挤到了视口之外，自然就看不到了。

解决方案 #

其实不需要用column-reverse也能实现底部导航栏，反而直接用column布局更直观，只需要让内容区域占满剩余空间，导航栏就会自动固定在底部。

修正后的CSS代码 #

.app {
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: var(--main-background);
  font-family: "Poppins";
  max-width: 100vw;
  min-height: 100vh; /* 修正为min-height，确保容器占满视口高度 */
  display: flex;
  flex-direction: column; /* 保持默认从上到下的布局 */
}

.route__wrapper {
  flex: 1; /* 让内容区域占据容器除导航栏外的所有剩余高度 */
  overflow-y: auto; /* 当内容超出时允许滚动，避免页面整体滚动 */
}

.navigation__wrapper {
  /* 给导航栏设置固定高度和样式，确保它在底部显示 */
  height: 60px;
  background-color: #ffffff; /* 示例背景色，可根据需求调整 */
  border-top: 1px solid #eee; /* 可选：添加顶部分割线 */
}

如果你一定要用column-reverse #

如果坚持想用column-reverse，只要保证.app高度正确，同时给.route__wrapper设置flex:1，导航栏也能正常显示：

.app {
  /* 其他样式不变 */
  min-height: 100vh;
  display: flex;
  flex-direction: column-reverse;
}

.route__wrapper {
  flex: 1;
  overflow-y: auto;
}

这种情况下，子元素的顺序会反转：.route__wrapper会占据顶部的剩余空间，.navigation__wrapper则固定在底部。

最终效果 #

不管用哪种方式，最终都能实现类似iPhone应用的底部导航栏——导航栏固定在屏幕底部，内容区域可以独立滚动，不会被导航栏遮挡。

内容的提问来源于stack exchange，提问作者Roger Staxx