Html 使主体具有浏览器高度的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6654958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make body have 100% of the browser height
提问by bodyofheat
I want to make body have 100% of the browser height. Can I do that using CSS?
我想让 body 具有 100% 的浏览器高度。我可以使用 CSS 做到这一点吗？
I tried setting height: 100%, but it doesn't work.
我试过设置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.
我想为页面设置背景颜色以填充整个浏览器窗口，但如果页面内容很少，我会在底部看到一个难看的白条。
回答by BentOnCoding
Try setting the height of the html element to 100% as well.
尝试将 html 元素的高度也设置为 100%。
html,
body {
height: 100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.
Body 查看其父元素 (HTML) 以了解如何缩放动态属性，因此 HTML 元素也需要设置其高度。
However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
但是 body 的内容可能需要动态更改。将 min-height 设置为 100% 将实现此目标。
html {
height: 100%;
}
body {
min-height: 100%;
}
回答by Josh Crozier
As an alternative to setting both the htmland bodyelement's heights to 100%, you could also use viewport-percentage lengths.
作为将html和body元素的高度都设置为 的替代方法100%，您还可以使用视口百分比长度。
5.1.2. Viewport-percentage lengths: the ‘vw', ‘vh', ‘vmin', ‘vmax' units
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.
5.1.2. 视口百分比长度：“vw”、“vh”、“vmin”、“vmax”单位
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
In this instance, you could use the value 100vh- which is the height of the viewport.
在这种情况下，您可以使用值100vh- 即视口的高度。
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
This is supported in most modern browsers - support can be found here.
大多数现代浏览器都支持此功能 -可以在此处找到支持。
回答by Angry Dan
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 heightlike min-heightanyway.
请记住，如果你要支持IE6，你需要找到一种方式楔入height:100%身体，IE6对待height喜欢min-height反正。
回答by Daniel Patru
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.
回答by Catfish
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
回答by OwN
After testing various scenarios, I believe this is the best solution:
在测试了各种场景后，我认为这是最好的解决方案：
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
It is dynamic in that the htmland the bodyelements will expand automatically if their contents overflow. I tested this in the latest version of Firefox, Chrome, and IE 11.
它是动态的，如果它们的内容溢出，html和body元素将自动扩展。我在最新版本的 Firefox、Chrome 和 IE 11 中对此进行了测试。
See the full fiddle here (for you table haters out there, you can always change it to use a div):
在这里查看完整的小提琴（对于那些讨厌桌子的人，您可以随时将其更改为使用 div）：
https://jsfiddle.net/71yp4rh1/9/
https://jsfiddle.net/71yp4rh1/9/
With that being said, there are several issues with the answers posted here.
话虽如此，此处发布的答案存在几个问题。
html, body {
height: 100%;
}
Using the above CSS will cause the html and the body element to NOT automatically expand if their contents overflow as shown here:
使用上述 CSS 将导致 html 和 body 元素在内容溢出时不会自动展开，如下所示：
https://jsfiddle.net/9vyy620m/4/
https://jsfiddle.net/9vyy620m/4/
As you scroll, notice the repeating background? This is happening because the body element's height has NOT increased due to its child table overflowing. Why doesn't it expand like any other block element? I'm not sure. I think browsers handle this incorrectly.
当你滚动时，注意到重复的背景了吗？发生这种情况是因为 body 元素的高度没有由于其子表溢出而增加。为什么它不像任何其他块元素那样扩展？我不知道。我认为浏览器处理不当。
html {
height: 100%;
}
body {
min-height: 100%;
}
Setting a min-height of 100% on the body as shown above causes other problems. If you do this, you cannot specify that a child div or table take up a percentage height as shown here:
如上所示，将 body 的 min-height 设置为 100% 会导致其他问题。如果这样做，则不能指定子 div 或 table 占用百分比高度，如下所示：
https://jsfiddle.net/aq74v2v7/4/
https://jsfiddle.net/aq74v2v7/4/
Hope this helps someone. I think browsers are handling this incorrectly. I would expect the body's height to automatically adjust growing larger if its children overflow. However, that doesn't seem to happen when you use 100% height and 100% width.
希望这可以帮助某人。我认为浏览器处理不当。如果它的孩子溢出，我希望身体的高度会自动调整变得更大。但是，当您使用 100% 高度和 100% 宽度时，这似乎不会发生。
回答by Jayant Varshney
A quick update
快速更新
html, body{
min-height:100%;
overflow:auto;
}
A better solution with today's CSS
使用当今 CSS 的更好解决方案
html, body{
min-height: 100vh;
overflow: auto;
}
回答by MineAndCraft12
What I use on the start of literally every CSS file I use is the following:
我在我使用的每个 CSS 文件的开头使用的是以下内容：
html, body{
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
The margin of 0 ensures that the HTML and BODY elements aren't being auto-positioned by the browser to have some space to the left or right of them.
0 的边距确保 HTML 和 BODY 元素不会被浏览器自动定位以在它们的左侧或右侧留出一些空间。
The padding of 0 ensures that the HTML and BODY elements aren't automatically pushing everything inside them down or right because of browser defaults.
填充为 0 可确保 HTML 和 BODY 元素不会因为浏览器默认设置而自动将其中的所有内容向下或向右推送。
The width and height variants are set to 100% to ensure that the browser doesn't resize them in anticipation of actually having an auto-set margin or padding, with min and max set just in case some weird, unexplainable stuff happens, though you probably dont need them.
宽度和高度变量设置为 100% 以确保浏览器不会在预期实际具有自动设置的边距或填充时调整它们的大小，设置最小值和最大值以防发生一些奇怪的、无法解释的事情，尽管你可能不需要它们。
This solution also means that, like I did when I first started on HTML and CSS several years ago, you won't have to give your first <div>a margin:-8px;to make it fit in the corner of the browser window.
这个解决方案还意味着，就像我几年前第一次开始使用 HTML 和 CSS 时所做的那样，您不必给第<div>一个 amargin:-8px;以使其适合浏览器窗口的角落。
Before I posted, I looked at my other fullscreen CSS project and found that all I used there was just body{margin:0;}and nothing else, which has worked fine over the 2 years I've been working on it.
在我发布之前，我查看了我的另一个全屏 CSS 项目，发现我在那里使用的只是body{margin:0;}其他任何东西，在我一直致力于它的 2 年中一直运行良好。
Hope this detailed answer helps, and I feel your pain. In my eyes, it is dumb that browsers should set an invisible boundary on the left and sometimes top side of the body/html elements.
希望这个详细的答案有帮助，我能感受到你的痛苦。在我看来，浏览器应该在 body/html 元素的左侧甚至是顶部设置一个不可见的边界是愚蠢的。
回答by Eddie
Here:
这里：
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
回答by Herbs
You can also use JS if needed
如果需要，您也可以使用 JS
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
