CSS 3 مقیاس هایی برای این کار دارد:

Viewport-Percentage (or Viewport-Relative) Lengths

از این مقیاس ها می توانید به جای پیکسل استفاده کنید:

 vh (viewport height)

vw (viewport width)

vmin (viewport minimum length)

vmax (viewport maximum length)

برای این سوال می توانیم از vh استفاده کنیم. 1vh برابر 1 درصد از ارتفاع صفحه مرورگر (قسمت قابل نمایش) است و 100vh برابر 100 درصد صفحه. بنابرین می توانیم از کد زیر استفاده کنیم (بیشتر مرورگرها از این قابلیت پشتیبانی می کنند):

HTML:

<div></div>

CSS:

div {
    height: 100vh;
}