使主体具有浏览器高度的100％

本文翻译自：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这是视口的高度。

Example Here 这里的例子

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

This is supported in most modern browsers - support can be found here . 大多数现代浏览器都支持此功能- 可以在此处找到支持 。