布局 html+css 底部导航问题解决
2018-06-26 本文已影响0人
Bertram_Cao
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》
