实现的效果

QQ20170808-154407

页面代码：

<div class="container">
  <div class="headerTitle">Title</div>
  <div class="content">&nbsp;</div>
  <div class="tabLayout">
    <div class="tabItem">
      HOME
    </div>
    <div class="tabItem">
      ITEM
    </div>
    <div class="tabItem">
      MY
    </div>
  </div>
</div>

样式代码：

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

.headerTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
}

.tabLayout {
  display: flex;
  height: 50px;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid #eee;
}

注意：container样式里必须要写上min-height: 100vh;，否则中间部分不会填充

原文链接: https://chenyongze.github.io/2017/08/08/flex-css/