CSS獲取滿屏是我們在網頁設計中常見的需求,下面介紹幾種獲取滿屏的方法。
/* 方法一 */ html, body { height: 100%; } /* 方法二 */ .wrapper { min-height: 100vh; } /* 方法三 */ .wrapper { height: 100%; position: relative; } .content { height: 100%; position: absolute; top: 0; }
方法一是最常見的方式,通過設置html和body元素的高度為100%來達到滿屏的效果。
方法二是使用min-height屬性,要求wrapper元素至少要有100vh的高度,即100%的視口高度,這樣就能保證它的高度至少是一個屏幕高度,如果內容多于一個屏幕高度,它也會自動延伸。
方法三是使用絕對定位的方法,利用父元素設置height: 100%;和position: relative;屬性,然后給子元素設置height: 100%;和position: absolute;以及top: 0;屬性,這樣就能保證子元素的高度和父元素相等,并且撐滿整個屏幕。