CSS能夠填充整個屏幕的方法有很多,下面我就來介紹幾種常見的方法。
第一種方法是使用絕對定位(position:absolute)來實現,具體代碼如下:
html,body{ height:100%; } .container{ position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; }
上面的代碼中,我們將html和body元素的高度都設置為100%,然后將.container元素絕對定位并覆蓋整個屏幕。
第二種方法是使用固定定位(position:fixed)來實現,代碼如下:
body{ height:100%; } .container{ position:fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100%; }
這種方法和第一種方法非常類似,只是改成了固定定位。
第三種方法是使用vh和vw單位,它可以直接將元素的高度和寬度設置為視口高度和寬度的比例,如下所示:
.container{ width:100vw; height:100vh; }
這種方法的優點是代碼簡潔明了,但缺點是在一些老舊的瀏覽器上可能會出現兼容性問題。
無論是哪種方法,都可以讓你的頁面充滿整個屏幕,讓用戶看起來更加舒適和美觀。
上一篇css填充背景色
下一篇css填充背景與圖片大小