[CSSチュートリアル】画面全体に広がるアダプティブな高さを実現するCSS

自分でデモを書く過程で、display:flexを使って垂直方向の中央寄せを実現したいと思い、以下のコードを書きました。

<style>
    #login{
        width:100%;
        height: 100%;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style>

では、囲んだ親要素の高さが画面全体を占めず、思ったような効果が得られません。

解決策 display: flex; justify-content: center; align-items: center; で、#login を min-height: 100vh とし、垂直方向の中央揃えを実現する。

<style>
    #login{
        width:100%;
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style>

ビューポート単位

ビューポートとは何ですか？

デスクトップではブラウザの表示可能な領域を指し、モバイルでは3つのビューポートが含まれます。レイアウトビューポート」「ビジュアルビューポート」「理想ビューポート」です。

ビューポート単位での"viewport"は、デスクトップ側ではブラウザの表示可能領域を指し、モバイル側ではビューポートでのレイアウトビューポートを指し、"viewport"はブラウザ内部の表示可能領域のサイズ、すなわちwindow.innerWidth/window.innerHeightサイズを指し、タスクバータイトルバーと下部ツールバーにおけるブラウザ領域サイズを除いたサイズです。

CSS3仕様によると、ビューポートの単位は主に以下の4つで構成されています。

1. vw: 1vwはビューポート幅の1％に相当し、ビューフレーム幅は100vwとなる。

2. vh: 1vhはビューポートの高さの1%に相当し、ビューフレームの高さは100Vhとなります。

3. vmin: vwとvhのうち、最も小さいものを選ぶ。

4. vmax: vwとvhのうち最大のものを選びます。

画面全体に対するCSS高さ適応の記事は以上です。CSS height adaptionの詳細については、過去の記事を検索していただくか、引き続き以下の記事をご覧ください。