ブロックを画面の高さ全体またはCSS3ビューポートユニットに引き伸ばす簡単な方法

この記事では、CSS3に登場したvw、vh、vmin、およびvmaxユニットを紹介します。

ビューポートユニットとは

ビューポート単位は、ブラウザの表示領域のサイズの割合として計算される相対的な測定単位です。 これらのユニットは、 CSS仕様の3番目のバージョンに登場しました。

測定単位vhおよびvw

vh



とvw



は、 ビューポートの高さとビューポートの幅 （それぞれビューポートの高さと幅）としてデコードできます。 1vh



はビューポートの高さの1％に相当し、 1vw



はビューポートの幅の1％に相当します。

測定単位vminおよびvmax

vmin



およびvmax



は、 ビューポートの最小値とビューポートの最大 vmax



表します。 1vmin



は1vh



と1vw



値を比較し、小さい方を選択します。 1vmax



は同じことを行いますが、2つの値のうち大きい方を選択します。 言い換えると、スマートフォンの画面幅が高さよりも小さい場合、 vmin



は幅を基準にして計算され、 vmax



は画面の高さを基準にして計算されます。

使用例

現在、フルスクリーンセクションの使用が増加しています。 特に、ランディングページで使用されます。 そのようなセクションを作成するには多くの方法がありますが、最も簡単でエレガントな方法はvh



ユニットを使用することです。

 section { height: 100vh; /*       */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモをご覧ください。

ブラウザのサポート

非常に多くのブラウザがこれらの測定単位をサポートしていますが、これは朗報です。 Chrome、Safari、Opera、Firefoxの最新バージョンに問題はありません。 IEは9番目のバージョンから部分的にサポートされています。 モバイルブラウザの問題：Opera Miniはこれらのユニットをまったくサポートしていません。Androidブラウザはバージョン4.4からのみサポートしています。 詳細な統計を表示します 。