CSS 垂直内容等于全屏分布的弹性框

Question

我正在尝试将 flex box 应用于我的布局，但我对如何实现以下目标有点迷茫。我将如何实现这一点，以便 3 面板始终以 5% 90% 和 5% 的比例占据全屏。

注意：目前我已经固定了顶部和底部位置，并且javascript计算了中间面板的高度，但它并不理想。

Answer 1

可能重复：Fill remaining vertical space with CSS using display:flex

但是：

html,
body {
  height: 100%;
  margin:0;
}
body {
  display: flex;
  flex-direction: column;
  background: turquoise;
}
header {
 height:15%;
}

footer {
 height:5%;
}
main {
  flex:1;  
  background: tomato;
}

<header>
  header 15%
</header>
<main>
  main room left
</main>
<footer>
  footer 5%
</footer>

CSS 垂直内容等于全屏分布的弹性框

CSS flex box with vertical content equal full screen distribution

css

flexbox