css - 带有粘性标题的响应式柔性盒设计

Question

我在为使用 flexbox 的响应式布局网站设计粘性页眉时遇到问题。我发现这个 fiddle 几乎解决了我的问题，但不完全是:http://jsfiddle.net/RnBhH/2/

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

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;
   }
   

Answer 1

很难理解你想要做什么，但我已经将 fiddle 修改为这个

http://jsfiddle.net/Xpvj4/

想法是只有两个主要的 flex 元素 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;
}