【CSS】要素の高さを動的にウィンドウの高さにするプロパティ

JavaScript 不要でCSSのみでウィンドウの高さにする

要素の高さをウィンドウの高さに合わせる場合、高さの単位に「 vh 」を利用します。

height: 100vh;

「vh」は「viewport height」の略

viewport の高さ(ウィンドウの高さ)に対する割合を指定することが可能です。100vh にすればウィンドウの高さ一杯(100%)に広げて、50vh にするとウィンドウの高さの半分(50%)に高さを設定する事ができます。

height 50vh;

Calc と合わせて高さも設定できる

calcを使って指定した数値分の高さを引くこともできるので、ページ上部(または下部)に設置した要素の高さ分を引いてウィンドウの高さに合わせる事もできます。

height: calc(100vh - 70px);
タイトルとURLをコピーしました