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

问题

I have a page that is separated vertically into two panes. The left side layout is fine but I am having trouble getting content to fill available space on the right. Below is a diagram illustrating this.

The header and footer (polymer elements) are a fixed height and the content area in between is swapped out between page views. In order to get the content to fill the space I have to specify the main container div height in vh units. This does work to a certain extent but I would like to use percentages to make it more flexible but it doesn't seem to work. Any ideas on how to lay this out better? My code is below. Thanks.

 <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>

回答1:

Try setting up your body vh to a 100vh and the rest of the heights will be easy to set. It might also be necessary to set min-height for some of your items. Be careful with the box sizing and margins so that your content does not outgrow your display or its container. I whipped a small example, see if it works for you.

/**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>

来源：https://stackoverflow.com/questions/43922077/content-within-div-wont-fill-available-space-without-specifying-height