今天我們海東科技就講一講如何讓一副圖片填滿整個屏幕(除去瀏覽器所占區(qū)域哦)。通常有兩種比較經(jīng)典的效果，一個就是在PC上經(jīng)常看到一些網(wǎng)頁鼠標動一下翻一整頁，另外一個就類似與手機APP第一次打開是的引導頁。不管是哪個，我們都要做到的一個效果就是讓一個HTML元素(標簽)的區(qū)域鋪滿全屏?就算是傳統(tǒng)的PC網(wǎng)頁，我們也要接受不同的電腦屏幕高度，在傳統(tǒng)的網(wǎng)頁設計中我們可能采用一個固定的寬度，比如960px、1000px、1200px，當然現(xiàn)在這種固定寬度的設計依然很流行，只是把這個固定的寬度增加了。但如果要實現(xiàn)看上去酷炫的風格，我們顯然不能使用固定的寬度和高度。

顯然，我們需要使用自適應的寬高;大家都知道寬度自適應似乎比高度自適應來的更簡單。可能大家都有這樣的經(jīng)歷，認為寬度100%比高度100%的適用范圍更加廣;而實際上也是如此。假設我們現(xiàn)在值在網(wǎng)頁上寫了、、三個最基本的標簽(實際上就是很多編輯器新建一個document默認所擁有的)，我們來看的盒模型

大家可以看到寬度是1350px，其實就如果出去margin就是我當前可用屏幕區(qū)域的100%寬度，而高度顯然不是這樣;這樣我們可以通俗地理解為寬度的100%比高度的100%應用范圍更廣。因此要實現(xiàn)我們的需求，寬度方面在沒有特殊情況下直接使用100%即可解決;而高度我們自然也想到過用100%,但不得不考慮它的適用范圍了。其實不管是寬度也好，高度也罷，它們的100%(當然其他數(shù)值也一樣)是以它們的父節(jié)點作為參考的，而最大的“祖宗”的默認寬度就是100%，而高度為0。

因此得到全屏展示當然我們也想到了兩種方式，一種是CSS，另外一種則是在靜態(tài)CSS無法實現(xiàn)的時候采用JS對HTML進行DOM操作動態(tài)改變元素的CSS屬性值。

總結

以上是生活随笔為你收集整理的html网页自动铺满屏幕,如何使HTML元素的区域铺满全屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。