div內的內容不會填充可用空間而不指定高度

Question

我有一個垂直分隔爲兩個窗格的頁面。左側佈局很好，但我無法獲取內容以填充右側的可用空間。以下是說明這一點的圖表。

頁眉和頁腳（聚合物元素）是固定的高度，其中的內容區域在頁面視圖之間換出。爲了獲得內容填充空間，我必須指定以vh爲單位的主容器div高度。這在一定程度上有效，但我想用百分比來使它更加靈活，但似乎並不奏效。任何想法如何更好地解決這個問題？我的代碼如下。謝謝。

<style> 
    paper-card { 
    width:100%; 
    } 

    .mainContainer{ 
    display: flex; 
    height:100%; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    } 

    .leftWindow { 
    display:flex; 
    height:100%; 
    width:550px; 
    padding-left: 10px; 
    padding-right: 10px; 
    } 

    .leftContainer{ 
    display: flex; 
    height:100%; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    } 

    .rightContainer{ 
    display: flex; 
    height:100%; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    } 

    .rightWindow { 
    flex-grow: 1; 
    height:100%; 
    padding-right: 10px; 
    } 
    .notificationBlock{ 
    display:flex; 
    flex:2 0 0; 
    background-color: #009900; 
    } 
    .controlPanelBlock{ 
    height:60px; 
    margin-bottom: 25px; 
    } 

    #divMainContainer { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: 80vh; 
    } 

    .divModeImage { 
    display:flex; 
    flex-flow: row wrap; 
    width: 30%; 
    height: 16vw; 
    flex-grow: 1; 
    margin-top: 1vmin; 
    margin-left: 1em; 
    margin-right: 1em; 
    margin-bottom: 2vmin; 
    } 

</style> 

<div class="mainContainer"> 
     <div class="leftWindow"> 
     <div class="leftContainer"> 
       other stuff. Left side displays fine 
      </div> 
     </div> 

     <div class="rightWindow"> 
     <div class="rightContainer"> 

       <notifications class="notificationBlock"> 

       <paper-card id="pcNotifcationBar" heading="&nbsp;"> 

        <view-content notification={{notification}}> 
        <!-- Content changes here depending on page --> 
         <div id="divMainContainer"> <!-- class is using height: 80vh --> 
         <!-- 1st row of three images --> 
         <div class="divModeImage"> <!-- class is using height: 16vw --> 
          <iron-image id="imgBefore1" class="cabinModeImage"></iron-image> 
         </div> 
         <div class="divModeImage"> <!-- class is using height: 16vw --> 
          <iron-image id="imgBefore2" class="cabinModeImage"></iron-image> 
         </div> 
         <div class="divModeImage"> <!-- class is using height: 16vw --> 
          <iron-image id="imgBefore3" class="cabinModeImage"></iron-image> 
         </div> 
         <!-- 2nd row of three images --> 
         <div class="divModeImage"> <!-- class is using height: 16vw --> 
          <iron-image id="imgAfter1" class="cabinModeImage"></iron-image> 
         </div> 
         <div class="divModeImage"> <!-- class is using height: 16vw --> 
          <iron-image id="imgAfter2" class="cabinModeImage"></iron-image> 
         </div> 
         <div class="divModeImage"> <!-- class is using height: 16vw --> 
          <iron-image id="imgAfter3" class="cabinModeImage"></iron-image> 
         </div> 
         </div> 
        <!-- Content changes here depending on page --> 
        </view-content> 

       </paper-card> 

       </notifications> 


       <footer class="controlPanelBlock" style="margin-top:10px;"></footer> 

     </div> 
     </div> 
</div> 

Answer 1

嘗試設置你的身體vh到100vh和其餘的高度將很容易設置。可能還需要爲某些項目設置最小高度。請小心箱子尺寸和邊距，以便您的內容不會超出顯示屏或其容器。我掀起了一個小例子，看看它是否適合你。

/**Reset all CSS, this is only a fraction of what you need*/ 
 
body, div{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t height: 100vh; /*Fix your body to the height of your display*/ 
 
    box-sizing: border-box;/*include the padding and border included in the elements total sizet*/ 
 
} 
 

 
/*You can use flex for this excercise*/ 
 
#main-container{ 
 
    height: 100%; 
 
    border: 1px solid gray; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; /**make the direction vertival*/ 
 
    box-sizing: border-box;/*include the padding and border included in the elements total sizet*/ 
 
    
 
} 
 

 
#container-1{ 
 
    background-color: red; 
 
    border: 1px solid gray; 
 
    height: 20px; 
 
    box-sizing: border-box;/*include the padding and border included in the elements total sizet*/ 
 
    
 
} 
 

 
#container-2{ 
 
    background-color: blue; 
 
    border: 1px solid gray; 
 
    flex-grow: 1; /**Enable the growth of this element*/ 
 
    box-sizing: border-box;/*include the padding and border included in the elements total sizet*/ 
 
} 
 

 
#container-3{ 
 
    background-color: green; 
 
    border: 1px solid gray; 
 
    height: 20px; 
 
    box-sizing: border-box;/*include the padding and border included in the elements total sizet*/ 
 
}

<div id="main-container"> 
 
<div id="container-1"> 
 

 
</div> 
 
<div id="container-2"> 
 

 
</div> 
 
<div id="container-3"> 
 

 
</div> 
 
</div>