Html 如何使div在不使用固定高度值的情况下访问剩余空间？_Html_Css_Flexbox

Html 如何使div在不使用固定高度值的情况下访问剩余空间？

html css

Html 如何使div在不使用固定高度值的情况下访问剩余空间？,html,css,flexbox,Html,Css,Flexbox,我非常喜欢flexbox的想法，我用它来让我的网站响应迅速但现在我很困惑我想做的是：我想让内容主体访问剩余空间。我尝试使用height:100%，但什么也没有发生，然后我尝试将height:100%提供给其父内容包装器，然后它会溢出主内容：我想知道：为什么会发生这种情况如何克服它注：该网站应具有响应性我创建了一个很好的JSFIDLE来解释我的情况。两件事：您为页眉和页脚分别指定了高度：10%。因此，在定义主要内容的高度时，请使用高度：80%。这样可以防止溢出使用flex

我非常喜欢flexbox的想法，我用它来让我的网站响应迅速

但现在我很困惑

我想做的是：

我想让

内容主体

访问剩余空间。我尝试使用

height:100%

，但什么也没有发生，然后我尝试将

height:100%

提供给其父

内容包装器

，然后它会溢出

主内容

：

我想知道：

为什么会发生这种情况

如何克服它

注：该网站应具有响应性

我创建了一个很好的JSFIDLE来解释我的情况。

两件事：

您为页眉和页脚分别指定了
```
高度：10%
```
。因此，在定义主要内容的高度时，请使用
```
高度：80%
```
。这样可以防止溢出
使用
```
flex:1
```
告诉flex项目使用容器中的所有可用空间

body，html{
保证金：0；
身高：100%；
背景色：#00b3b3；
}
.主货柜{
显示器：flex；
弯曲方向：立柱；
身高：100%；
/*宽度：100%*/
框大小：边框框；
}
.主标题{
背景色：#099；
身高：10%；
}
.主页脚{
背景色：#099；
身高：10%；
}
.主要内容{
背景色：#fff；
高度：80%；/*主要内容-少页眉-少页脚*/
显示器：flex；
}
.内容包装器{
背景色：#80ccff；
边缘：1米；
显示器：flex；
弯曲方向：立柱；
}
.内容主管{
背景色：红色；
}
.内容正文{
背景颜色：绿色；
弹性：1；
}


标题
内容头
内容体
页脚

    <body>
      <div class="main-container">
         <div class="main-header">
           HEADER
         </div>
         <div class="main-content">
         <div class="content-wrapper">
             <div class="content-head">
                 Content Head
             </div>
               <div class="content-body">
              CONTENT-BODY
            </div>           
         </div>
         </div>
         <div class="main-footer">
           FOOTER
         </div>
      </div>
    </body>

@CHARSET "ISO-8859-1";
body,html{
  margin:0;
    width:100%;
    height:100%;
    //font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family:"Trebuchet MS !important";
  background-color:#00b3b3;
}
.main-container{
    display:flex;
    flex-direction:column;

    flex-wrap:nowrap;
    height:100%;
  width:100%;
  box-sizing:border-box;
}
.main-header{
    background-color:#099;
    height:10%;
}
.main-footer{
    background-color:#099;
    height:10%;
}
.main-content{
    background-color:#fff;
    height:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
}
.content-wrapper{
  background-color:#80ccff;
  margin:1em;
  display:flex;
  flex-direction:column;
  height:100%;
}
.content-head{
  background-color:red;

}
.content-body{
  background-color:green;
  height:100%;
}