CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思います。コードは次のとおりです。

<スタイル>
    ＃ログイン{
        幅:100%;
        高さ: 100%;
        ディスプレイ: フレックス; 
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
    }
    .ログインボディ{
        幅: 600ピクセル;
        高さ: 260px;
        境界線: 1px実線 #000;
    }
</スタイル>

望む効果は得られず、外側の親要素の高さが画面全体を埋め尽くしません。 。

解決策: #login に min-height: 100vh を指定し、display: flex; justify-content: center; align-items: center; を使用して垂直方向の中央揃えを実現します。

<スタイル>
    ＃ログイン{
        幅:100%;
        最小高さ: 100vh;
        ディスプレイ: フレックス; 
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
    }
    .ログインボディ{
        幅: 600ピクセル;
        高さ: 260px;
        境界線: 1px実線 #000;
    }
</スタイル> 

ビューポート単位

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

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

ビューポート単位の「ビューポート」は、デスクトップではブラウザの表示領域を指します。モバイル側ではビューポート内のレイアウトビューポートを指します。また、「ビューポート」はブラウザ内の表示領域のサイズ、つまり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 の適応性の高いコンテンツに関する関連記事は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。