布局 html+css 底部导航问题解决

1.需求

使用vue-cli和vue-router完成app h5界面的设计，元素包含导航和分类内容展示。

<template>
    <div id="app" class="page">
      <div class="context">
      <router-view/>
    </div>
    <div class="flooter">
      <div class="flooter-title">
        <router-link to="/home"><span class="word">首页</span></router-link>
      </div>
      <div class="flooter-title">
        <router-link to="/course"><span class="word">学习</span></router-link>
      </div>
      <div class="flooter-title">
        <router-link to="/forum"><span class="word">考试</span></router-link>
      </div>
      <div class="flooter-title">
        <router-link to="/aboutMe"><span class="word-mine">我的
        <div class="notice"></div></span></router-link>
      </div>
    </div>
  </div>
</template>

2.问题

底部导航使用绝对定位，盒子下部依然存在<page>文档流,当context拉长滞后，向下滑动滚动条出现在了底部导航上。

3.思路

使用定位布局会覆盖在文档流之上，而不是像float一样会使其他元素浮动在周围，所以当context元素拉长，独步滚动条存在，不会被覆盖（注：加了z-index也不会覆盖滚动条），所以采用css表格显示，底部导航存在于一行，<router-view/>显示在一行。

<div class="table">
  <div class="tableRow">
    <router-view/>
  </div>
  <div class="tableRow">
    <div class="flooter-title">
      <router-link to="/home"><span class="word">首页</span></router-link>
    </div>
    <div class="flooter-title">
      <router-link to="/course"><span class="word">学习</span></router-link>
    </div>
    <div class="flooter-title">
      <router-link to="/forum"><span class="word">考试</span></router-link>
    </div>
    <div class="flooter-title">
      <router-link to="/aboutMe"><span class="word-mine">我的
      <div class="notice"></div></span></router-link>
    </div>
  </div>
</div>

.table {
  display: table;
}
.tableRow {
  display: table-row;
}

4.总结

html5种常用布局

a.固体布局：简单粗暴写死宽高
b.流体布局：float + 固定宽度
c.凝胶布局：margin：auto
d.定位显示：position
e.表格显示：display：table

6.推荐

《Head First HTML and CSS》

https://pan.baidu.com/s/13JumlAa_hy-RkLDxyKvIHA z61s