我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%，但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口，但如果页面内容很少，我就会在底部得到一个丑陋的白色条。
当前回答
在20多个答案之后，似乎没有一个人提到了我发现的最关键的因素——标记。
在尝试了这个问题和其他一些问题的基本每个答案之后，我重新构造了我的标记，如下所示:
<body>
<div class="section1">
<nav>
</nav>
...
</div>
<div class="section2">
</div>
</body>
本质上，它需要两个不同的外部容器。第一个容器用于包含导航栏，并将背景色/图像一直扩展到浏览器的高度，第二个容器用于包含“折叠以下”的所有内容——包括第二个背景色/图像。
这个解决方案允许第一个容器的背景一直扩展到底部，同时保持第二个容器的自由，以占用尽可能多的空间。
从这一点开始，唯一需要得到我和原始问题想要的结果的CSS如下:
body {
height: 100%;
}
.section1 {
height: 100%;
background: black; /* for demo purposes */
}
.section2 {
background: white; /* for demo purposes */
}
其他回答
我在每个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>一个边距:-8px;使它适合浏览器窗口的角落。
在我发布之前，我看了看我的另一个全屏CSS项目，发现我在那里使用的只是body{margin:0;}，没有其他东西，这在我工作的2年里工作得很好。
希望这个详细的回答能有所帮助，我能感受到你的痛苦。在我看来，浏览器应该在body/html元素的左侧(有时是顶部)设置一个看不见的边界是愚蠢的。
这里更新
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
在这里:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
CSS3有一个新的方法。
height:100vh
它使ViewPort 100%等于高度。
所以你的代码也应该如此
body{
height:100vh;
}
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
