html5: flexbox de três linhas com meio fixo superior / inferior e rolável
É possível fazer umahtml5
layout de flexbox com fixoheader/footer
e um rolávelarticle
seção como o seguinte paraRaposa de fogo 24 ecromo 31?
+----------+
| header |
+----------+
| article ||
| ||
| ||
| ||
+----------+
| footer |
+----------+
Eu tentei isso (simplificado):
body {
display: flex;
flex-direction: column;
}
header {
flex: 1;
}
article {
flex: 8;
overflow-y: scroll;
}
footer {
flex: 1;
}
e agora estou tentando preencher o espaço restante com oarticle
, mas se a altura do conteúdo for menor que a altura da janela, o rodapé não será fixo e, se for maior, o rodapé rola para fora da área visível ...