首先我們來看一個實際的問題，讓body中的一個div占全屏，（問題來源：http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window
下面的代碼符合要求嗎？
<style> #div1{ background:#ccc; border:1px solid red; width:100%; height:100%; } </style> </head> <body> <div id="div1"> div1 </div>
運行后div1還是只占一行，height沒有到達全屏。
當然，我們以前用過一種方法，就是使用position:absolute,設置top:0,bottom;0這樣元素的尺寸就會根據偏移來推斷了。
不改變position,怎么達到要求呢？
增加一句；
html,body{
height:100%;
width:100%;
}
就可以了。
為什么？
首先我們要清楚htmlVSbody區別。
一篇好文；
html VS body
Summary
- The
htmlandbodyelements are distinct block-level entities, in a parent/child relationship. - The
htmlelement's height and width are controlled by the browser window. html尺寸由瀏覽器窗口控制。 - It is the
htmlelement which has (by default)overflow:auto, causing scrollbars to appear when needed. - The
bodyelement is (by default)position:static, which means that positioned children of it are positioned relative to thehtmlelement's coordinate system. - In almost all modern browsers, the built-in offset from the edge of the page is applied through a
marginon thebodyelement, notpaddingon thehtmlelement.幾乎所有的瀏覽器，默認的偏移margin是在body元素上，而不是html的padding.（通過做實驗確實如此）有些還是body的padding，所有重置頁邊距用body{margin:0;padding:0}缺一不可。
Introduction
Many web developers do not understand the difference between applying style to the body element versus the html element. Most of the time these authors will apply style only to the body element; when that's not sufficient, they'll spam all sorts of styles on both html and body until the page happens to look correct.
The confusion is understandable. In the beginning, both were treated similarly, with (now-deprecated) attributes like bgcolor being applied to the body tag, affecting the whole page.
This article attempts to enlighten you, Web Developer, to fully grok how these two elements are used in modern web browsers.
Mommy, Where Do Scrollbars Come From?
On any non-trivial HTML page, there's enough content that the page gets a scrollbar on the side. Where does this scrollbar come from? Magic? An unholy tryst between UI widgets? Maybe. Or maybe it's the simple result of an implicit CSS rule like:
html { overflow:auto }"But the html element doesn't have a height!" you cry, confused. "How can it generate scrollbars, if it's a block-level element without a specific height?"
The html element is a little bit special. Its height and width are governed by the window/frame it's in. When you increase your window width, the fixed width of the html element is increased; when you make the window taller, so increases the height of the html element.
Because pictures often help, let's see what it would look like if the html element could have overflow:visible:
滾動條從哪里來？原因是
html { overflow:auto;} 是默認的。
如果不設置html height怎么會有滾動條，原來html有點特殊，它的widht和height是有瀏覽器窗口大小決定的。
Hopefully this picture helps, rather than confuses. See how the html element (in red) goes to the edges of the window, but the body overflows that container? The html element is responsible for showing the scrollbar for the 'page' when the content gets too tall.
So What?
What does this mean for you? A couple things:
- If you're one of those designers who likes fixed-width, centered pages, you can do this by setting a
widthon thebodytag and centering it. (Example) - Because
bodyisn't positioned (or more accurately, it'sposition:staticby default), setting a child element toheight:100%causes it to be 100% of the height of thehtmlelement, not thebodyelement. Thus, if you want something to be as tall as the body is (going down past the bottom of the page) usebody { position:relative } 意思是說如果你想一個child元素 height為100%， -
(However, see also Tall Nav and Tall Content.)
- Hopefully it helps you understand exactly where
marginandpaddingandborderwill be appear when applied to thehtmlandbodyelements.
轉自：http://phrogz.net/css/htmlvsbody.html 演示參考這個網頁
清楚了html和body后，我們來看
html,body{
height:100%;
width:100%;
}
div{
width:100%;
height:100%;
}
為什么這個可以將div的尺寸變成屏幕一樣大。、
看下面的例子，我們沒有設置body的width和height。
html{ height:100%; width:100%; } #div1{ background:#ccc; width:100%; height:100%; } </style> <script> window.onload=function(){alert(document.body.clientHeight); }; </script> </head> <body> <div id="div1"> div1 </div>
顯示是，div1背景還是只有一行。說明height:100%
javascript函數輸出:18。這說明，我們沒有定義body的height，但由於里面有內容，把里面的內容包起來的最小高度為18px，
由於body是塊元素，width沒設置時更父元素的width一樣，也就是html的width。
《css權威指南指出》height width百分數是相對於包含塊的。在本例中，div1的height相對於body，但由於body沒有設置
height，《css權威指南》又指出（P180），如果沒有顯示聲明包含塊的height，百分數高度會重置為auto，所以上面div1height設置為任何值都跟設置沒設置一樣。包含塊與div1高度完全相同。
所有出現了上面的情況。
(牢記：就是要設置div100%顯示，必須設置其上一級div的寬度或高度，否則無效。）
所有html，body，div都要設置height為100%。雖然html默認的width和height一樣，但是由於body設置的是100%，如果沒有
顯式設置html，body還是相當於沒設置。