3个div的垂直对齐和伸展行为（1个已知固定高度+ 2个未知高度）

Question

鉴于问题的具体细节，这个问题的标题是一个难以理解的问题，所以如果它没有突出我正在问的问题，那么道歉。

在我描述问题之前，请注意我只是在 纯html / css中寻找 IE10兼容 解决方案 即可。

如上所示，我们有3个div（#top，#mid，#bottom）。我们知道底部div的高度，但不知道顶部/中部。

鉴于此，是否有一种解决方案可以确保#top始终显示其内部内容，#mid始终填补#top和#bottom之间的差距？

注意：我们可以假设(#top.height + #bottom.height) > #wrapper.height始终#wrapper是3个div周围的容器元素。

Answer 1

<input type="checkbox">

body {
  overflow: hidden;
  margin: 0;
}
#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#header {
  border-bottom: 1px solid black;
  background: #ddd;
  font-weight: bold;
  flex-shrink: 0;
}
#content {
  overflow-y: auto;
}
#footer {
  background: #ddd;
  border-top: 1px solid black;
  flex-shrink: 0;
  height: 20px;
}