我想让身体拥有100％的浏览器高度。我可以使用CSS吗？
我尝试设置height: 100%，但它不起作用。
我想为页面设置背景颜色以填充整个浏览器窗口，但如果页面内容很少，我会在底部看到一个丑陋的白色条。
尝试将html元素的高度设置为100％。
html,
body {
height: 100%;
}
Body查看其父级（HTML）以了解如何扩展动态属性，因此HTML元素也需要设置它的高度。
然而，身体的内容可能需要动态改变。将min-height设置为100％将实现此目标。
html {
height: 100%;
}
body {
min-height: 100%;
}
请检查一下：
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}
或尝试新方法视口高度：
html, body { width: 100vw; height: 100vh;}
视口：如果您使用视口意味着任何大小的屏幕内容将达到屏幕的整个高度。
如果需要，您也可以使用JS
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
尝试
<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; }
如果您不想编辑自己的CSS文件并自己定义高度规则，最典型的CSS框架也可以解决这个问题，使用body元素填充整个页面，以及其他问题，轻松实现多个视口大小。
例如，Tacit CSS框架解决了这个问题，您不需要定义任何CSS规则和类，只需在HTML中包含CSS文件即可。
尝试添加：
body {
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%
}
适用于所有主流浏览器：FF，Chrome，Opera，IE9 +。适用于背景图像和渐变。滚动条可根据内容需求提供。
我会用这个
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}<html>
<body>
</body>
</html>浏览器将使用min-height: 100vh，如果某种程度上浏览器有点旧，min-height: 100%将成为后备。
如果您希望在调整屏幕大小时身体和html扩展其高度（例如移动大小），则必须使用overflow: auto
所有答案都是100％正确并得到了很好的解释，但我做了一些很好的事情并且非常简单地使它具有响应性。
这里的元素将占据100％的视图端口高度，但是当涉及到移动视图时，它在纵向视图（移动）上看起来不太好，所以当视口变小时，元素将会折叠并相互重叠。所以这里的代码响应很少。希望有人能从中得到帮助。
<style>
.img_wrap{
width:100%;
background: #777;
}
.img_wrap img{
display: block;
width: 100px;
height: 100px;
padding: 50px 0px;
margin: 0 auto;
}
.img_wrap img:nth-child(2){
padding-top: 0;
}
</style>
<div class="img_wrap">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>
<script>
var windowHeight = $(window).height();
var elementHeight = $('.img_wrap').height();
if( elementHeight > windowHeight ){
$('.img_wrap').css({height:elementHeight});
}else{
$('.img_wrap').css({height:windowHeight});
}
</script>
在这里更新
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
作为将html和body元素的高度设置为100%的替代方法，您还可以使用视口百分比长度。
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。
在这种情况下，您可以使用值100vh - 这是视口的高度。
body {
height: 100vh;
}
body {
min-height: 100vh;
}
大多数现代浏览器都支持这种功能 - support can be found here。
关于底部的额外空间：您的页面是ASP.NET应用程序吗？如果是这样，你的标记中几乎可能包含所有内容。不要忘记为表单设置样式。将overflow:hidden;添加到表单可能会删除底部的额外空间。
@media all {
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
} }
CSS3有一个新方法。
height:100vh
它使ViewPort 100％等于高度。
所以你的守则应该是
body{
height:100vh;
}
如果你有背景图像，那么你需要设置它：
html{
height: 100%;
}
body {
min-height: 100%;
}
这可确保当内容高于视口时允许您的body标签继续增长，并且当您开始向下滚动时背景图像继续重复/滚动/无论如何。
请记住，如果你必须支持IE6，你将需要找到一种方法来楔入height:100%身体，IE6无论如何都像height一样对待min-height。
如果要保留正文的边距而不想滚动条，请使用以下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％，以确保浏览器不会调整大小，以期实际上有一个自动设置的边距或填充，最小和最大设置，以防万一，一些奇怪的，无法解释的东西发生，虽然你可能不需要它们。
这个解决方案也意味着，就像我几年前第一次开始使用HTML和CSS时所做的那样，你不必给你的第一个<div>一个margin:-8px;，使它适合浏览器窗口的角落。
在我发布之前，我查看了我的另一个全屏CSS项目，发现我在那里使用的只是body{margin:0;}，没有别的，这已经工作了2年，我一直在努力。
希望这个详细的答案有所帮助，我感受到你的痛苦。在我看来，浏览器应该在左侧，有时在body / html元素的顶部设置一个不可见的边界是愚蠢的。
在测试了各种场景之后，我相信这是最好的解决方案：
html {
width:100%;
height: 100%;
display: table;
}
body {
width:100%;
display:table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
它是动态的，因为如果内容溢出，html和body元素将自动扩展。我在最新版本的Firefox，Chrome和IE 11中对此进行了测试。
在这里看到完整的小提琴（为了你的桌子，你可以随时更改它以使用div）：
https://jsfiddle.net/71yp4rh1/9/
话虽如此，这里发布的答案有几个问题。
html, body {
height: 100%;
}
使用上面的CSS会导致html和body元素在其内容溢出时不会自动展开，如下所示：
https://jsfiddle.net/9vyy620m/4/
滚动时，请注意重复背景？发生这种情况是因为由于子表溢出，body元素的高度没有增加。为什么它不像任何其他块元素那样扩展？我不确定。我认为浏览器处理不当。
html {
height: 100%;
}
body {
min-height: 100%;
}
如上所示在身体上设置100％的最小高度会导致其他问题。如果执行此操作，则无法指定子div或表占用百分比高度，如下所示：
https://jsfiddle.net/aq74v2v7/4/
希望这有助于某人。我认为浏览器处理错误。如果它的孩子溢出，我希望身体的高度自动调整变大。但是，当您使用100％高度和100％宽度时，似乎不会发生这种情况。
快速更新
html, body{
min-height:100%;
overflow:auto;
}
使用今天的CSS更好的解决方案
html, body{
min-height: 100vh;
overflow: auto;
}
这里：
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}