Responsive flex box design with sticky header

3
votes

I am having problems designing a sticky header for my responsive layout site which uses flex box. I found this fiddle which almost solves my problem, but not quite: http://jsfiddle.net/RnBhH/2/

  1. How can I make the header element height fit the content in the header since the height is different depending on device viewport width?

  2. Provided #1 is solved, how can I make the article and the footer to be scrollable while the variable height header sticky to the top?

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

2 Answers

7
votes

It's a little hard to catch what are you trying to do, but I have modified the fiddle to this

http://jsfiddle.net/Xpvj4/

The idea is to have just two main flexed elements header and .content and put both article and footer into the .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;
}
0
votes

Make a div and take both article & footer inside it. Name class ="scrollable" to that div. & Apply this CSS :

.scrollable{
overflow-y: scroll;
}