如果不指定高度，div 内的内容将无法填充可用的 space

Question

我有一个垂直分隔成两个窗格的页面。左侧布局很好，但我无法获取右侧的可用内容 space。下图说明了这一点。

页眉和页脚（聚合物元素）高度固定，中间的内容区域在页面视图之间交换。为了让内容填充 space，我必须以 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

尝试将 body vh 设置为 100vh，其余高度将很容易设置。可能还需要为您的某些项目设置 min-height。请注意框的大小和边距，以免您的内容超出显示或其容器的范围。我打了一个小例子，看看是否适合你。

/**Reset all CSS, this is only a fraction of what you need*/
body, div{
 margin: 0;
 padding: 0;
 border: 0;
 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>

如果不指定高度，div 内的内容将无法填充可用的 space

Content within div won't fill available space without specifying height

html

css

polymer