基于Flex布局的三段式页面结构：导航栏+可滚动内容区+底部Tabbar

<!--html-->
<div class="container">
  <div class="nav">我是导航栏</div>
  <div class="content">我是滚动区域</div>
  <div class="tabBar">我是tabBar</div>
</div>

// css
.container {
  width: 500px;
  height: 500px;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.nav {
  height: 50px;
  background-color: blue;
}

.content {
  flex: 1;
  background-color: green;
}

.tabBar {
  height: 50px;
  background-color: yellow;
}

这段代码的效果是：

因为主轴是从上往下，侧轴 align-items: stretch; 默认就是拉伸的，并且滚动区域永远占据中间的位置，滚动区域的高度不需要 100vh - nav高度 - tabBar高度这么复杂，而且在小程序端也可以更好的适配安全距离。