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

1.需求

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

2.问题

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

3.思路

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

  

    
  
  

    

      首页
    
    

      学习
    
    

      考试
    
    

      我的
      

    
  


.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