Question

我非常喜欢flexbox的想法，我用它来使我的网站响应。

但现在我非常困惑。

我想做的是：

我想让content-body访问剩余的空间。我尝试使用height: 100%，但后来没有任何反应，然后我尝试向其父height: 100%提供content-wrapper，然后它溢出main-content：

我想知道：

为什么会这样，
如何克服它。

注意：网站应该有响应。

我创建了一个很好的jsFiddle来解释我的情况。 http://jsfiddle.net/bqpxd3y4/2/

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

CSS

@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%;
}

Answer 1

两件事：

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

body,html{
    margin:0;
    height:100%;
    background-color:#00b3b3;
}

.main-container{
    display:flex;
    flex-direction:column;
    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: 80%; /* main content - less header - less footer */
    display:flex;
}

.content-wrapper {
    background-color: #80ccff;
    margin: 1em;
    display: flex;
    flex-direction: column;
	
}
.content-head{
  background-color:red;

}
.content-body{
  background-color:green;
  flex: 1;
}

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

jsFiddle

点击此处详细了解flex媒体资源：

如何让div访问剩余空间而不使用固定高度值？

1 个答案:

jsFiddle