我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%，但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口，但如果页面内容很少，我就会在底部得到一个丑陋的白色条。
当前回答
在这里:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
其他回答
在测试了各种场景后，我认为这是最好的解决方案:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0;
padding: 0;
}
它是动态的，因为如果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%;
}
如上所示，在body上设置最小高度为100%会导致其他问题。如果你这样做，你不能指定子div或表占用一个百分比高度，如下所示:
https://jsfiddle.net/aq74v2v7/4/
希望这能帮助到一些人。我认为浏览器没有正确地处理这个问题。如果子节点溢出，我希望身体的高度能够自动调整。然而，当你使用100%的高度和100%的宽度时，这似乎不会发生。
只需要一行CSS就可以完成。
body{ height: 100vh; }
Try
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
对于真正的纯粹主义者来说，这种方法尊重浏览器的默认边距，并防止由其他方法产生的不需要的滚动，除了随着内容的增长而增长。在Chrome, Safari和Firefox中测试。背景只是做做样子……
html { 显示:flex; flex-direction:列; 高度:100%; 背景:红色; } 身体{ flex: 1; 背景:绿色; }
