12

firefox 24 とchromium 31で、次のような固定セクションとスクロール可能セクションを含むhtml5フレックスボックス レイアウトを作成することは可能ですか?header/footerarticle

+----------+
| header   |
+----------+
| article ||
|         ||
|         ||
|         ||
+----------+
| footer   |
+----------+

私はこれを試しました（簡略化）：

body {
  display: flex;
  flex-direction: column;
}
header {
  flex: 1;
}
article {
  flex: 8;
  overflow-y: scroll;
}
footer {
  flex: 1;
}

そして今、残りのスペースを で埋めようとしていますarticleが、コンテンツの高さがウィンドウの高さよりも小さい場合、フッターは固定されず、大きい場合はフッターが表示領域からスクロールします...

4

1 に答える 1

19

おそらく、体が 100% 高いことを確認する必要があります。

html, body {
    margin:0;
    height:100%;
    min-height:100%;
}

フィドルを作りました。

于 2013-10-20T13:19:26.210 に答える