没有滚动条的 100% 高度（带有弹性框的父级和嵌套子级）

Question

我喜欢没有任何滚动条的 100% 高度。在我的示例中，浏览器似乎计算了整个高度。子元素如何获得父元素的 100% 高度。

html

<div class="wrapper">
<div class="header"></div> //<- Here is the problem
<div class="content">
    <div class="element">
       <div class="element-child1"></div>
       <div class="element-child2"></div>
    </div>
<div/>

css

  html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
  }

  .wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
  }

  .wrapper > .content {
    align-self: stretch;
    flex: 1;
    background: red;
  }

  .element {
     align-self: stretch;
     display: flex;
     flex-direction: column;
     background-color: yellow;
  }

  .element-child1 {
     flex: 0 0 20px;
     background-color: blue;
  }

  .element-child2 {
     flex: 1;
     background-color: green;
  }

滚动条示例：http://jsfiddle.net/zyYPv/

Answer 1

您应该能够使用flex-grow 属性：

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="content">
        <div class="element-child1"></div>
        <div class="element-child2"></div>
    <div/>
</div>

CSS

html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
}

.wrapper > .content {
    flex-grow: 1;    
    display: flex;
    background: red;
    flex-direction: column;
}

.element-child1 {
    flex: 0 0 20px;
    background-color: blue;
}

.element-child2 {
    flex-grow: 1;
    background-color: green;
}

flex-grow example

替代品

calc example

display:table example

Answer 2

Demo Fiddle

CSS

  html, body, .wrapper {
      width: 100%;
      height: 100%;
      margin: 0;
      padding:0;
  }
  .wrapper > .header {
      height: 40px;
      background-color: black;
  }
  .content {
      position:absolute;
      top:40px;
      bottom:0;
      background: red;
      width:100%;
  }
  .element {
      height: 100%;
      background-color: yellow;
  }
  .element-child1 {
      height: 20px;
      background-color: blue;
  }
  .element-child2 {
      background-color: green;
      position:absolute;
      top:20px;
      bottom:0;
      width:100%;
  }