Question

我正在使用flexbox来布局一个Web应用程序。它的工作原理除了主要内容区域外。 “router-view”是预期的全高度。但是这里面的div不是路由器视图的全高吗？

如何制作id为“make-full-height”全高的div？

我尝试将高度设置为100％，但这没有效果。

HTML

<div class="full-screen flex-container-column">
     <div class="header no-flex">
         Fixed Header
     </div>

     <!--The router-view IS full height-->
     <router-view class="flexible">
         <div id="make-full-height">
             How do I make this div full height?
         </div>
     </router-view>
     <div class="footer no-flex">
        Fixed Footer
     </div>
</div>

CSS

.full-screen {
  height: 100vh;
}

.flex-container-column {
  display: flex;
  flex-direction: column;
}

.no-flex {
  flex: 0 0 auto;
  overflow: auto;
}
.footer {
  height: 30px;
  background: #555;
  color: white;
}

.header{
  height: 50px;
  background: #555;
  color: white;
}


.flex-container {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}
.left, .right {
  width: 200px;
  background: #eee;
}
.flexible {
  flex: 1 1 auto;
}

Answer 1

将<router-view设置为display: flex，并为flex:1设置#make-full-height。这样＃make-full-height将填充它的容器，因为没有其他孩子。

.full-screen {
  height: 100vh;
}

.flex-container-column {
  display: flex;
  flex-direction: column;
}

.no-flex {
  flex: 0 0 auto;
  overflow: auto;
}
.footer {
  height: 30px;
  background: #555;
  color: white;
}

.header{
  height: 50px;
  background: #555;
  color: white;
}


.flex-container {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}
.left, .right {
  width: 200px;
  background: #eee;
}
.flexible {
  flex: 1 1 auto;
  background-color: #88F;
  display: flex;
}

#make-full-height {
  flex : 1;
  background-color: #8F8;
 }

<div class="full-screen flex-container-column">
     <div class="header no-flex">
         Fixed Header
     </div>

     <!--The router-view IS full height-->
     <router-view class="flexible">
         <div id="make-full-height">
             How do I make this div full height?
         </div>
     </router-view>
     <div class="footer no-flex">
        Fixed Footer
     </div>
</div>

如何制作父级Flexbox高度的内部div

1 个答案: