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

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>