使身体有100％的浏览器高度
我想使身体有100％的浏览器高度。 我可以使用CSS吗？
我尝试了设置height: 100% ，但不起作用。
我想为页面设置背景颜色来填充整个浏览器窗口，但是如果页面内容很less，我会在底部看到一个难看的白色条。
尝试将html元素的高度设置为100％。
html, body { height: 100%; }
Body看它的父级（HTML）如何缩放dynamic属性，所以HTML元素也需要设置高度。
然而，身体的内容可能需要dynamic变化。 将最小高度设置为100％就可以达到这个目的。
html { height: 100%; } body { min-height: 100%; }
如果你有一个背景图像，那么你会想要设置它：
html{ height: 100%; } body { min-height: 100%; }
这确保了当内容比视口更高时，允许您的身体标记继续增长，并且当您开始向下滚动时，背景图像会继续重复/滚动/不pipe。
记住，如果你必须支持IE6，你将需要find一种height:100%楔入的方式height:100%身体height:100% ，IE6尽可能地处理min-height 。
作为将html和body元素的高度设置为100%的替代方法，还可以使用视口百分比长度。
5.1.2。 视口百分比长度：'vw'，'vh'，'vmin'，'vmax'单位
视口百分比长度是相对于初始包含块的大小。 当初始包含块的高度或宽度发生变化时，会相应地缩放。
在这种情况下，您可以使用值100vh – 这是视口的高度。
示例在这里
body { height: 100vh; }
body { min-height: 100vh; }
大多数现代浏览器都支持这一function – 可以在这里find支持 。
如果你想保持身体的边缘，不想滚动条，使用下面的CSS：
html { height:100%; } body { position:absolute; top:0; bottom:0; right:0; left:0; }
设置body {min-height:100%}会给你滚动条。
html, body { height: 100%; margin: 0; padding: 0; }
我使用的字面上每个CSS文件的开始使用如下：
html, body{ margin: 0; padding: 0; min-width: 100%; width: 100%; max-width: 100%; min-height: 100%; height: 100%; max-height: 100%; }
0的边距确保HTML和BODY元素不被浏览器自动定位，以在它们的左边或右边留有一些空间。
0的填充确保HTML和BODY元素不会因为浏览器的默认设置而自动将其中的所有内容全部推下。
宽度和高度变体设置为100％，以确保浏览器不调整它们的大小，以便实际上有一个自动设置的边距或填充，最小和最大设置，以防万一发生一些奇怪的，无法解释的东西，虽然你可能不需要他们。
这个解决scheme也意味着，就像我几年前刚开始使用HTML和CSS时所做的那样，您不必为第一个<div> margin:-8px;出margin:-8px; 使其适合浏览器窗口的angular落。
在我发布之前，我看了一下我的另一个全屏CSS项目，发现我所用的只是body{margin:0;}而没有其他的东西，这两年来我一直在努力工作。
希望这个详细的答案有帮助，我感到你的痛苦。 在我看来，浏览器应该在body / html元素的左侧，有时是顶侧设置一个不可见的边界是愚蠢的。
经过各种场景的testing，我相信这是最好的解决scheme：
html { width:100%; height: 100%; display: table; } body { width:100%; display:table-cell; } html, body { margin: 0px; padding: 0px; }
这是dynamic的，如果html和body元素的内容溢出，它们将自动扩展。 我testing了最新版本的Firefox，Chrome和IE 11。
在这里看完整的小提琴（对于你表中的仇恨者，你总是可以改变它使用div）：
https://jsfiddle.net/71yp4rh1/9/
说到这里，在这里发布的答案有几个问题 。
html, body { height: 100%; }
使用上面的CSS将导致html和body元素不会自动展开，如果它们的内容溢出，如下所示：
https://jsfiddle.net/9vyy620m/4/
当你滚动，注意到重复的背景？ 发生这种情况的原因是由于其子表溢出，主体元素的高度没有增加。 为什么不像其他任何块元素一样展开？ 我不确定。 我认为浏览器处理这个不正确。
html { height: 100%; } body { min-height: 100%; }
如上所示在身体上设置最小高度为100％会导致其他问题。 如果你这样做，你不能指定一个子div或表占据一个百分比高度，如下所示：
https://jsfiddle.net/aq74v2v7/4/
希望这有助于某人。 我认为浏览器正在处理这个错误。 我希望身体的高度自动调整越来越大，如果它的孩子溢出。 但是，当您使用100％高度和100％宽度时，似乎不会发生这种情况。
这里：
html,body{ height:100%; } body{ margin:0; padding:0 background:blue; }
快速更新
html, body{ min-height:100%; overflow:auto; }
如果需要，你也可以使用JS
var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var pageHeight = $('body').height(); if (pageHeight < winHeight) { $('.main-content,').css('min-height',winHeight) }
请检查这个：
* {margin: 0; padding: 0;} html, body { width: 100%; height: 100%;}
或者尝试新的方法视口高度：
html, body { width: 100vw; height: 100vh;}
视口：如果你使用的视口意味着任何大小的屏幕内容将会达到屏幕的全高。
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 100%; } html body { min-height: 100% }
适用于所有主stream浏览器：FF，Chrome，Opera，IE9 +。 适用于背景图像和渐变。 滚动条可用于内容需求。
尝试
<html style="width:100%; height:100%; margin: 0; padding: 0;"> <body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
只有1行的CSS …你可以做到这一点。
body{ height: 100vh; }
关于底部的额外空间：你的页面是一个ASP.NET应用程序吗？ 如果是这样的话，你的标记中可能会包含几乎所有的东西。 不要忘记devise风格。 添加overflow:hidden; 到表单可能会删除底部多余的空间。
@media all { * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } }
CSS3有一个新的方法。
height:100vh
它使ViewPort 100％等于高度。
所以你的代码应该是
body{ height:100vh; }
