将页眉和页脚设置为内容高度，内容部分占用所有可用空间

Question

在我的页面中，我不知道页眉和页脚的高度。让页眉和页脚根据内容取高度。

从我给予内容部分的100％重置高度。我正在尝试但没有得到结果。任何人帮助我？

html,body{
  height:100%;
}

div.wrapp{
  display:flex;
  height:100%;
  flex-flow: column wrap;
  border:2px solid blue;
}

header{
  flex:1;
  width:100%;
  border:1px solid red;
}

section{
  flex:1;
  height:100%;
}

footer{
  flex:1;
  width:100%;
}

<div class="wrapp">
  <header>asfsdf</header>
  <section>sfasfsdf</section>
  <footer>footer</footer>
</div>

Answer 1

您可能希望section获取剩余的高度：

/* unnecessary is commented out */
* {box-sizing: border-box}

html, body {
  height: 100%; /* can also use viewport units (100vh) */
  margin: 0;
}

div.wrapp {
  display: flex;
  height: 100%; /* same here */
  flex-flow: column wrap;
  border: 2px solid blue;
}

header {
  /*flex:1;*/
  /*width:100%;*/
  border: 1px solid red;
}

section {
  flex: 1; /* does the trick */
  /*height:100%;*/
}

footer {
  /*flex:1;*/
  /*width:100%;*/
  border: 1px solid red;
}

<div class="wrapp">
  <header>header</header>
  <section>section</section>
  <footer>footer</footer>
</div>