美文网首页
布局 html+css 底部导航问题解决

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

作者: Bertram_Cao | 来源:发表于2018-06-26 22:10 被阅读0次

    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

    相关文章

      网友评论

          本文标题:布局 html+css 底部导航问题解决

          本文链接:https://www.haomeiwen.com/subject/urqvyftx.html