2

最近のバージョンの Chrome と Firefox に実装されている柔軟なボックス レイアウト モデルを使用して、スティッキー フッターを実装しようとしています。

body 要素内に次のマークアップがあるとします。

<header>
    HEADER
</header>

<div>
    CONTENT
</div>

<footer>
    FOOTER
</footer>

私の考えは、次の CSS を使用することです。

html,
body {
    height: 100%;
}

body {
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

div {
    -webkit-flex: 1;
    flex: 1;
}

footer {
    background-color: yellow;
}

コンテンツがビューポートの高さの 100% 未満である限り、これは正常に機能します。ただし、コンテンツが大きくなると、Chrome 28 はコンテンツの上にフッターを描画し始めます。それはバグのある動作ですか (そして、どうすれば回避できますか)、それとも私の CSS が間違っていますか?

Chrome の動作はhttp://jsfiddle.net/SYmJp/でテストできます。

Firefox は意図したとおりに表示します。Chrome/Chromium 25/26 と同様です。

これが最近の Chrome バージョンのリグレッションである場合、バグは既に報告されていますか?

追加 された明らかなエラーは、Chrome 29 でも持続します。

4

1 に答える 1

0

高さを min-height に変更します: http://jsfiddle.net/n4rv8xws/

これにより、Chrome 39で修正されました：

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

これは Chrome の回帰であるというあなたの主張に同意します。

于 2014-12-24T22:40:54.080 に答える