CSS是網頁設計中非常重要的一部分,它能額外完善網頁的各種效果。本文將介紹CSS中的一種屬性,即頁面高度單位vh。
body{ height: 100vh; }
那么,什么是vh呢?vh是viewport height的簡稱,意為視口高度。視口就是瀏覽器顯示網頁的區域,vh就是相對于視口高度的百分比。
舉個例子,假如當前瀏覽器窗口高度是600px,那么1vh就等于6px(因為1vh等于視口高度的1%)。同理,100vh就等于整個瀏覽器窗口的高度。
對于使用vh單位的元素,無論瀏覽器窗口大小如何變化,它們的高度都會自適應調節。比如,我們可以使用下面的CSS代碼讓頁面從頂部鋪滿整個瀏覽器窗口:
body{ height: 100vh; margin: 0; }
注意,vh只適用于height,不適用于width。如果要保持頁面鋪滿整個瀏覽器窗口且寬度不變,可以使用下面的代碼:
body{ height: 100vh; width: 100%; margin: 0; }
總之,vh單位是一種非常有用的CSS屬性,它可以讓頁面高度始終鋪滿整個瀏覽器窗口,使網頁更加美觀大方。
上一篇css頂部不動