如何讓div的大小佔滿整個螢幕?

2021-08-08 13:46:22 字數 821 閱讀 3733

一、先來**

二、原因在這裡

1、如果要以百分比設定元素(div)的尺寸,必要以父元素的尺寸作為參考,如果父元素沒有設定尺寸,那麼子元素(div)尺寸自然不會生效。

2、所以如果設定div的高度為100%,那麼他的參考元素就是是body,那麼如何設定body的尺寸呢?

3、在怪異模式下,body可以作為根元素,設定它的高度為100%的時候(不考慮外邊距),body的高度取是瀏覽器的高度。

4、在標準模式下,html元素才是根節點,div的父元素是body,body的父元素是html,然後html設定為100%,取得是瀏覽器的高度,body高度設定為100%,得到的是html的的高度,所以最好同時設定html,body。

5、因為預設body的margin:8px,所以如果div想佔據全屏,需要設定*

三、簡述名詞

標準模式

是指,瀏覽器按w3c標準解析執行**。

怪異模式

則是使用瀏覽器自己的方式解析執行**(在網頁的最頂端沒有),因為不同瀏覽器解析執行的方式不一樣,所以我們稱之為怪異模式。

四、後言

前端小白一枚,如果有錯誤的地方還請告知,謝謝。

讓div撐滿整個螢幕的方法(css)

在body只有乙個div的時候,可以通過這樣的方式讓div撐滿整個螢幕。1.給div設定定位。複習一下 css中position有五種屬性 static 預設值,沒有定位 absolute 絕對定位,相對於父級元素進行定位 relative 相對定位 fixed 固定定位,相對於瀏覽器視窗進行定位 ...

網頁佔滿整個螢幕 9個跨屏網頁設計的基本原則

跨屏網頁設計可以有效解決移動網際網路時代下螢幕多樣化的問題,但從技術角度來看,其卻存在著很多的困難。沒有固定的頁面尺寸 沒有公釐或英吋,沒有任何物理限制,讓人感到無從下手。因此,現在就讓我們來說明一下如何運用跨屏網頁設計的各項基本原則來實現,而不是抗拒流暢的網頁體驗。為了簡單起見,我們將著重講布局。...

讓div高度撐滿螢幕的方法

在body只有乙個div的時候,可以通過這樣的方式讓div撐滿整個螢幕。1.給div設定定位。複習一下 css中position有五種屬性 static 預設值,沒有定位 absolute 絕對定位,相對於父級元素進行定位 relative 相對定位 fixed 固定定位,相對於瀏覽器視窗進行定位 ...