完全なビューポート高さにボディーを伸ばすこと:行方不明の方法

あなたが粘着性のフッターを作っているか、viewportに関連した若干の内容を中心にしていると仮定してください.あなたはストレッチしたいbody 要素は、ブラウザのビューポートの完全な高さにも、そのコンテンツに一致するようにさらに成長させる.この仕事は確かにバジリオン時代を解決し、パイと同じくらい簡単でなければならない.正しい?正しい?

最先端の方法

もちろん!適用min-height: 100vh にbody 要素はトリックを行うべきです.こちらです.100vh はbody 高さはビューポート高さの100 %をとりますが、min-height の代わりにheight にするbody 必要であればさらに成長する.それが正確に我々が必要とするものでありません?
まあほとんど.このようなページを典型的なモバイルブラウザで開きますiOS Safari or Android Chrome ), これは、コンテンツのサイズに関係なくスクロールされます.ページがすべてのコンテンツを持っていない場合でも、その底はまだブラウザの下部のUIパネルの下に消えてしまいます!
この理由はかなり簡単です.これらのブラウザのUI要素はスクロール後に縮小し、実際のコンテンツに追加のスペースを提供します.高さ100vh 最大可能なビューポート高さに対応します.初期ビューポートの高さは小さいので、body による要素min-height of 100vh 最初にその内容にかかわらずViewport高さを上回ります.

既知のfix この問題は次のようになります.

html {
    height: -webkit-fill-available; /* We have to fix html height */
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

このソリューションは、Chromeのマイナーグリッチがありますbody 高さは、ビューポートの高さと同期しないように、同じままになります.それ以外は、このアプローチは問題を解決します.
しかし、我々は現在修正しなければならないhtml 高さ.その場合は、古い、より堅牢なソリューションを使用しないでください?

旧学校道

我々は固定を避けることができなかったのでhtml 高さから、100 %の高さを通過する良い古い方法を試してみましょうhtml 要素.
適用しましょうmin-height: 100% にbody 100 %が親の完全な高さである.html ). 子供のパーセンテージ高さは親が固定高さを必要とするので、我々は適用しなければならないheight: 100% にhtml 要素の高さを完全なビューポートの高さに固定します.
の割合の高さからhtml モバイルブラウザの要素は、最小限のビューポートの高さに相対的に計算され、上記のスクロールの問題はもはや私たちを悩まない!

html {
    height: 100%; /* We still have to fix html height */
}

body {
    min-height: 100%;
}

この解決策は100vh つは、それは時間の記念碑から使用されており、それは確かに動作します!
まあいいえ.どうやら、そのようなbody 要素はhtml 高さ(すなわち、ビューポート高さで、または、より正確に、最小のビューポート高さで).
固定のために起こるhtml 高さ、それがどうかどうかは重要ではないheight: 100% or height: -webkit-fill-available .

もちろん、これは、勾配を適用することによってbody コンテンツが、それだけではない.ページの背景はbody 要素とhtml 要素はその内容に伸びるはずです.我々はそれを達成することができますか?

行方不明の道

私は、ストレッチのもう一つの方法を提案しますbody 上記の問題なしで完全なビューポート高さへの要素.コアアイデアはFlexBoxを使用することです.これは、子要素がさらに固定された次元を持つ親にまで伸びることができます.
まず、適用min-height: 100% にhtml 要素を完全な最小ビューポートの高さに拡張します.それから私たちはdisplay: flex and flex-direction: column 垂直の主軸でそれをフレックス容器に変えること.最後にflex-grow: 1 にbody これにより、html 高さ.
The align-self プロパティbody 要素は暗黙のうちにstretch 値、したがってbody 幅はすでにhtml 幅.

html {
    min-height: 100%; /* Look, it's not fixed anymore! */

    display: flex;
    flex-direction: column;
}

body {
    flex-grow: 1;
}

今両方html and body 彼らのコンテンツにストレッチすることができます、我々は割合の高さを使用しているので、モバイルブラウザとの問題は全くありません.きちんと!

ノート

Flexboxベースのソリューションは、任意の深さのために動作することは明らかです.これは、コンテンツが内部の要素にレンダリングされている場合に簡単に使用できますbody , でなくbody 要素そのもの.それは典型的なシナリオですReact or Vue , 例えば.

あなたが気づいたかもしれないように、フレックス容器の主軸の方向は重要ではありません.私は、この場合、垂直軸がよりエレガントであると思います、そして、私は本当に他の変形をテストしませんでした.私は、それが多分壊れることができる方法を見ません、しかし、誰が知っていますか.

FlexboxベースのソリューションはIEでは動作しません.しかし、あなたはとにかくそれを支持しませんか?