如何在浏览器中进行多级高度拉伸？

Question

我需要控制高度布局，这是接近桌面行为：

1. 我设置了dom元素的顶层高度。
2. 在它的深处，内容自动缩放，以适应新的高度。

对于一个层次结构，它很容易用flex实现。但我需要这样的布局：

<top height="...rem">
  <header height="...rem"/>
  <main> // stretched height
    <main2> // stretched height
      <content>
        limited height by main2 and add scroll if necessary
      </content>
    </main2>
    <footer height="...rem"/>
  </main>
</top>

我用内容的绝对位置和灵活的概念来证明这个问题.

https://jsfiddle.net/2Lfgq93h/6/

所以问题是：

1. 是否可以更简单地实现它？
2. 什么是概念证明的陷阱？

Answer 1

因此，一个问题是，似乎不需要<main2>元素或.submain类，就像您在小提琴中所称的那样。

主要要注意的是，您希望一些flex元素(我特别指的是具有display: flex的父元素的子元素)具有固定的大小(例如页眉和页脚)，而有些元素的大小是可变的。为此，可以使用flex: none和flex: 1 1的组合

​

* {
  box-sizing: border-box;
}

.height-limit {
  height: 10rem;
  display: flex;
  flex-direction: column;
}

header {
  flex: none;
  padding: 1rem;
  background: #bdc3c7;
}

.main {
  flex: 1 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  background: #e74c3c;
}

.content {
  flex: 1 1;
  overflow: auto;
  background: #3498db;
}

footer {
  flex: none;
  padding: 1rem;
  background: #2ecc71;
}

<div class="height-limit">
  <header>header</header>
  <div class="main">
    <div class="content">
      some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body  
    </div>
    <footer>footer</footer>
  </div>
</div>

​