div内的内容不会填充可用空间而不指定高度 [英] Content within div won't fill available space without specifying height

问题描述

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

页眉和页脚（聚合物元素）的高度是固定的，页面之间的内容区域被换出观点。为了获得内容填充空间，我必须指定以vh为单位的主容器div高度。这在一定程度上有效，但我想用百分比来使它更加灵活，但似乎并不奏效。任何想法如何更好地解决这个问题？我的代码如下。谢谢。

 < style> 
纸卡{
宽度：100％; 
} 
 
 .mainContainer {
 display：flex; 
身高：100％; 
 flex-direction：row; 
 flex-wrap：nowrap; 
 justify-content：flex-start; 
} 
 
 .leftWindow {
 display：flex; 
身高：100％; 
 width：550px; 
 padding-left：10px; 
 padding-right：10px; 
} 
 
 .leftContainer {
 display：flex; 
身高：100％; 
 flex-direction：column; 
 flex-wrap：nowrap; 
 justify-content：flex-start; 
} 
 
 .rightContainer {
 display：flex; 
身高：100％; 
 flex-direction：column; 
 flex-wrap：nowrap; 
 justify-content：flex-start; 
} 
 
 .rightWindow {
 flex-grow：1; 
身高：100％; 
 padding-right：10px; 
} 
 .notificationBlock {
 display：flex; 
 flex：2 0 0; 
背景颜色：＃009900; 
} 
 .controlPanelBlock {
 height：60px; 
 margin-bottom：25px; 
} 
 
 #divMainContainer {
 position：relative; 
 display：block; 
宽度：100％; 
身高：80vh; 
} 
 
 .divModeImage {
 display：flex; 
 flex-flow：换行; 
宽度：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> 
其他东西。左侧显示罚款
< / div> 
< / div> 
 
< div class =rightWindow> 
< div class =rightContainer> 
 
< notifications class =notificationBlock> 
 
  
< view-content notification = {{notification}}> 
<！ - 内容在这里根据页面而改变 - > 
< div id =divMainContainer> <！ - 课程使用高度：80vh  - > 
 <！ - 三幅图像的第一行 - > 
< div class =divModeImage> <！ -  class is using height：16vw  - > 
< iron-image id =imgBefore1class =cabinModeImage>< / iron-image> 
< / div> 
< div class =divModeImage> <！ -  class is using height：16vw  - > 
< iron-image id =imgBefore2class =cabinModeImage>< / iron-image> 
< / div> 
< div class =divModeImage> <！ -  class is using height：16vw  - > 
< iron-image id =imgBefore3class =cabinModeImage>< / iron-image> 
< / div> 
 <！ - 第三排三张图像 - > 
< div class =divModeImage> <！ -  class is using height：16vw  - > 
< iron-image id =imgAfter1class =cabinModeImage>< / iron-image> 
< / div> 
< div class =divModeImage> <！ -  class is using height：16vw  - > 
< iron-image id =imgAfter2class =cabinModeImage>< / iron-image> 
< / div> 
< div class =divModeImage> <！ -  class is using height：16vw  - > 
< iron-image id =imgAfter3class =cabinModeImage>< / iron-image> 
< / div> 
< / div> 
<！ - 内容在这里根据页面而改变 - > 
< / view-content> 
 
< / paper-card> 
 
< / notifications> 
 
 
< footer class =controlPanelBlockstyle =margin-top：10px;>< / footer> 
 
< / div> 
< / div> 
< / div> 
  

解决方案

尝试设置你的身体vh到100vh其余的高度将很容易设置。可能还需要为某些项目设置最小高度。请小心箱子尺寸和边距，以便您的内容不会超出显示屏或其容器。我鞭打了一个小例子，看看它是否适用于您。

/ * *重置所有的CSS，这只是你需要的一小部分* / body，div {margin：0;填充：0; border：0;身高：100vh; / *将你的身体固定到你的显示器的高度* / box-sizing：border-box; / *在元素总数中加入填充和边框* /} / *你可以在这个练习中使用flex * / #main -container {height：100％;边框：1px纯灰色;显示：-webkit-flex;显示：flex; -webkit-flex-direction：column; flex-direction：列; / **使方向垂直* / box-sizing：border-box; / *包含元素中包含的填充和边框总大小* /}＃container-1 {background-color：red;边框：1px纯灰色; height：20px; box-sizing：border-box; / *包含元素中包含的填充和边框总大小* /}＃container-2 {background-color：blue;边框：1px纯灰色; flex-grow：1; / **启用此元素的增长* / box-sizing：border-box; / *包含元素中包含的填充和边框总大小* /}＃container-3 {background-color：green;边框：1px纯灰色; height：20px; box-sizing：border-box; / *包含元素中包含的填充和边框总大小* /}

 < div id =main-container>< div id =container-1>< / div>< div id =container-2 >< / div>< div id =container-3>< / div>< / div>  

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>

解决方案

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>

这篇关于div内的内容不会填充可用空间而不指定高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！