本文翻譯自：Make body have 100% of the browser height
I want to make body have 100% of the browser height. 我想讓主體具有瀏覽器高度的100％。 Can I do that using CSS? 我可以使用CSS嗎？
I tried setting height: 100% , but it doesn't work. 我嘗試將height: 100%設置height: 100% ，但不起作用。
I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom. 我想爲頁面設置背景色以填充整個瀏覽器窗口，但是如果頁面內容很少，我將在底部看到一個難看的白色條。
#1樓
參考：https://stackoom.com/question/RvG2/使主體具有瀏覽器高度的
#2樓
If you have a background image then you will want to set this instead: 如果您有背景圖片，則需要設置該圖片：
html{
height: 100%;
}
body {
min-height: 100%;
}
This ensures that your body tag is allowed to continue growing when the content is taller than the viewport and that the background image continues to repeat/scroll/whatever when you start scrolling down. 這樣可以確保當內容高於視口時，您的body標籤可以繼續增長，並且當您向下滾動時，背景圖像可以繼續重複/滾動/任何內容。
Remember if you have to support IE6 you will need to find a way to wedge in height:100% for body, IE6 treats height like min-height anyway. 請記住，如果您必須支持IE6，則需要找到一種提高height:100%用於身體，IE6還是將height視爲min-height 。
#3樓
About the extra space at the bottom: is your page an ASP.NET application? 關於底部的額外空間：您的頁面是ASP.NET應用程序嗎？ If so, there is probably a wrapping almost everything in your markup. 如果是這樣，您的標記中可能幾乎包裝了所有內容。 Don't forget to style the form as well. 別忘了爲表單設置樣式。 Adding overflow:hidden; 添加overflow:hidden; to the form might remove the extra space at the bottom. 到表格可能會刪除底部的多餘空間。
#4樓
If you want to keep the margins on the body and don't want scroll bars, use the following css: 如果要在正文上保留邊距並且不希望使用滾動條，請使用以下CSS：
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
Setting body {min-height:100%} will give you scroll bars. 設置body {min-height:100%}將爲您提供滾動條。
See demo at http://jsbin.com/aCaDahEK/2/edit?html,output . 請參見http://jsbin.com/aCaDahEK/2/edit?html上的演示，輸出。
#5樓
@media all {
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
} }
#6樓
As an alternative to setting both the html and body element's heights to 100% , you could also use viewport-percentage lengths. 作爲將html和body元素的高度都設置爲100%的替代方法，您還可以使用視口百分比長度。
5.1.2. 5.1.2。 Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units 視口百分比長度：“ vw”，“ vh”，“ vmin”，“ vmax”單位
The viewport-percentage lengths are relative to the size of the initial containing block. 視口百分比長度相對於初始包含塊的大小。 When the height or width of the initial containing block is changed, they are scaled accordingly. 更改初始包含塊的高度或寬度時，將對其進行相應縮放。
In this instance, you could use the value 100vh - which is the height of the viewport. 在這種情況下，您可以使用值100vh這是視口的高度。
body {
height: 100vh;
}
body {
min-height: 100vh;
}
This is supported in most modern browsers - support can be found here . 大多數現代瀏覽器都支持此功能- 可以在此處找到支持 。