带有粘性标题的响应式弹性盒设计答案

【问题标题】：Responsive flex box design with sticky header带有粘性标题的响应式弹性盒设计
【发布时间】：2014-03-24 00:47:00
【问题描述】：

我在为使用弹性框的响应式布局网站设计粘性标题时遇到问题。我发现这个小提琴几乎解决了我的问题，但并不完全：http://jsfiddle.net/RnBhH/2/

由于高度因设备视口宽度而异，如何使标题元素高度适合标题中的内容？

如果解决了#1，我怎样才能使文章和页脚可滚动，而可变高度的标题会粘在顶部？

html, body {
 margin:0;
 height:100%;
 min-height:100%;
}
body {
 margin:0;
 display: flex;
 flex-direction: column;
}
header {
 flex: 1;
 background:red;
}
article {
 flex: 8;
 overflow-y: scroll;
 background:green;
}
footer {
 flex: 1;
 background:blue;
}

【问题讨论】：

标签： css sticky flexbox

【解决方案1】：

你想做什么有点难，但我已经修改了这个小提琴

http://jsfiddle.net/Xpvj4/

这个想法是只有两个主要的弯曲元素header 和.content 并将article 和footer 放入.content。

html, body {
  margin:0;
  height:100%;
  min-height:100%;
}
body {
  margin:0;
  display: flex;
  flex-direction: column;
}
header {
  flex: 1 0 10%;
  background:red;
}
.content {
    flex: auto;
    overflow-y: auto;
}
article {
    background:green;
}
footer {
    height: 40px;
    background:blue;
}

【讨论】：

【解决方案2】：

制作一个 div 并将文章和页脚放入其中。将 class="scrollable" 命名为该 div。并应用此 CSS：

.scrollable{
overflow-y: scroll;
}

【讨论】：

但是 header 和 .scrollable 的 flex 属性的值应该是什么？我希望标题的高度是动态的。我不应该使用弹性盒子吗？