CSS(十三).高度如何鋪滿全屏
阿新 • • 發佈：2018-03-13
缺省 www. 快捷 down 兩種 打開 /word window 沒有
標準模式實現如下(html頭部含有
怪異模式實現如下(html頭部不含
該需求來源一次面試題。
IE6不認識!important聲明，IE7、IE8、Firefox、Chrome等瀏覽器認識；而在怪異模式中，IE6/7/8都不認識!important聲明，這只是區別的一種，還有很多其它區別。所以，要想寫出跨瀏覽器的CSS，你必須采用標準模式。好像太絕對了，呵呵。好吧，要想寫出跨瀏覽器CSS，你最好采用標準模式。
目前能夠找到的有兩種方案：
- A.利用css百分比實現
B.利用css vh 單位實現(直接設置即可，非常簡單快捷)
vh,是css中的相對長度單位，表示相對視口高度(Viewport).
首先來說說 A 計劃的實現
原理1: 子元素通過父元素的 指定寬高，設定百分比繼承父元素的寬高。
width:100%;height:auto;
1.怪異模式下，body 可以作為根元素。2.標準模式下，html 才是根節點。
有
<!DOCTYPE html>是 標準模式。沒有則是怪異模式。
通常我們都推薦 標準模式。也就是說，我們需要通過設置 html{width100%;}
標準模式實現如下(html頭部含有<!DOCTYPE html>)
css
html,body { height: 100%; }
html
<div id="box" style="background-color: blue;width:100px;height:100%;"></div>怪異模式實現如下(html頭部不含<!DOCTYPE html>)
css
body {
height: 100%;
}html
<div id="box" style="background-color: blue;width:100px;height:100%;"></div>接下來非常說說B計劃，其實非常簡單。直接設置 vh 即可。
該方法需要 IE9 以上。
原理：vh是相當於視窗的高度(滿高是100vh)。vw是相當於視窗的寬度(滿寬是100vw)。 瀏覽器內部可視區域。window.innerWidth
張鑫旭大佬博客
滿高實現如下
<div id="box" style="background-color: blue;height:100vh;"></div>CSS(十三).高度如何鋪滿全屏