CSS中,讓元素占滿整個屏幕是非常常見的需求,今天我們就來說說如何讓body元素占滿整個屏幕。
首先,我們需要確保頁面中沒有默認的margin和padding。可以使用以下代碼清除:
body { margin: 0; padding: 0; }
接下來,我們需要讓body元素的高度占滿整個屏幕。可以利用viewport單位來實現:
body { height: 100vh; }
vh即表示視口高度(viewport height),1vh等于視口高度的1%,故而100vh即表示占滿整個屏幕的高度。
接下來是寬度的問題。如果內容不是很寬,我們可以把body的寬度設置為100%。但如果內容很寬,我們則需要使用min-width屬性,以讓body元素的寬度至少占滿整個屏幕:
body { min-width: 100%; }
這樣,當屏幕寬度小于內容寬度時,body元素會被自動拉伸至占滿整個屏幕寬度。
最后,我們還需要確保html元素的高度也占滿整個屏幕:
html { height: 100%; }
這樣,我們就完成了讓body元素占滿整個屏幕的操作。
上一篇css計算器如何制作
下一篇css控制取消連接