在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Muse-UI的Layout如何讓div高度鋪滿剩下的屏幕

Muse-UI的Layout如何讓div高度鋪滿剩下的屏幕

圖片描述

如圖
Muse-UI的Layout Flexbox 如何讓兩個導(dǎo)航欄中間的2鋪滿剩下的屏幕？
原生的Flex Box我知道怎么實現(xiàn)，但Muse-ui的那個文檔里的方法我看不懂，不會用？求教

  <div id="app">
      <mu-appbar style="width: 100%;" title="Title"></mu-appbar>
      <mu-flex class="box" diretion="column" fill align-content="center">
        <div>2</div>
      </mu-flex>
    <!--<div class="a">3</div>-->
      <mu-container>
        <mu-bottom-nav>
          <mu-bottom-nav-item title="Recents" icon="restore"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Favorites" icon="favorite"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Nearby" icon="location_on"></mu-bottom-nav-item>
        </mu-bottom-nav>
      </mu-container>
回答
編輯回答
幼梔
<style>
.is-full-width{
  width: 100%;
}

.content{
  flex: 1
}
</style>
<div style="width: 100%; background: #fff; padding: 8px;">
  <mu-flex direction="column" style="width: 100%;height: 100vh;">
    
    <mu-flex class="is-full-width">
      <mu-appbar  class="is-full-width" title="Title"></mu-appbar>
    </mu-flex>
    <mu-flex class="is-full-width" fill>
    </mu-flex>
    <!--<div class="a">3</div>-->
    <mu-flex  class="is-full-width" >
      <mu-container>
        <mu-bottom-nav>
          <mu-bottom-nav-item title="Recents" icon="restore"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Favorites" icon="favorite"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Nearby" icon="location_on"></mu-bottom-nav-item>
        </mu-bottom-nav>
      </mu-container>
      </mu-flex>
  </mu-flex>
  
</div>
</div>
2017年3月29日 08:17