Question

我在使用弹性框的响应式布局网站设计粘性标头时遇到问题。我发现这个小提琴几乎解决了我的问题，但并不完全：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;
}

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

Answer 2

制作一个div并同时收录文章＆amp;里面的页脚。将class class =“scrollable”命名为该div。＆安培;应用此CSS：

.scrollable{
overflow-y: scroll;
}

响应的柔性盒设计与粘性标头

2 个答案: