Html5は、コンテナは、画面の高さや残りの高さの適応的なレイアウトの実装を埋めることができます

フロントエンドのページレイアウトでは、コンテナを画面の高さいっぱい、あるいは画面の残りの高さいっぱいに配置する必要にしばしば遭遇します。通常、この時はheight:100%のCSSで記述することが当然となります。これは、コンテナの内容が書かれている場合は、時間の多くは問題ない、所望の効果を達成することができますが、コンテナの内容が比較的小さい場合は、十分な高さを保持するために、CSSのスタイルは、実際には動作していないことです。だから、どのようにこの問題を解決するのですか？

コンテナの高さを画面一杯にする

中身がほとんどないコンテナの場合、このように画面いっぱいに表示させることができます。

The .container{
    min-height:100vh
}

読んで字の如く、この属性一つでOKです。vhは画面の高さを表す新しい単位で、対応する幅の属性vwがあります、まだ知らない人は調べてみてください。この新しい単位は、一部の古いブラウザではサポートされていない場合があります（それが誰かは皆さんご存知でしょう）。

コンテナの高さが残りの画面の高さを埋めるようにする

上記は、コンテナは、画面全体を埋めることが比較的簡単なケースは、この単純なケースでは、実際のプロジェクトは非常に少ないですが、一般的にもっと発生するコンテナは、上記の1つの基盤を行うには、画面の残りの高さを埋めるようにすることがあります、この需要も単純で、vhのフレックスレイアウトと組み合わせて実現するには非常にコンテナにすることができますです。コードで直接見てください。

.container{
    min-height:100vh;
    display:flex
}
.header{
    height:100px
}
.content{
    flex:1
}
.footer{
    height:100px
}

上記のスタイルを使用することで、コンテンツの高さを画面の残りの高さに合わせることが容易になります。繰り返しになるが、古いブラウザの適応には問題があるかもしれない。私が取り組んでいるプロジェクトは、主にモバイル用なので、その古い胸騒ぎは無視することにする。

今回は、Html5レイアウトの実装で、コンテナを画面の高さいっぱいにしたり、残りの高さを適応させる方法について紹介しましたが、より関連するHtml5コンテナを画面の高さいっぱいにする内容は、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします！。