我想让主体有100%的浏览器高度。我可以用CSS来做吗?
我试着设置高度:100%，但它不起作用。
我想为页面设置一个背景色来填充整个浏览器窗口，但如果页面内容很少，我就会在底部得到一个丑陋的白色条。
当前回答
除了将html和body元素的高度同时设置为100%，你还可以使用viewport-percentage length。
5.1.2. 视口百分比长度:“vw”，“vh”，“vmin”，“vmax”单位 viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。
在这个例子中，你可以使用值100vh——这是视口的高度。
例子
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
这在大多数现代浏览器中都是支持的-可以在这里找到支持。
其他回答
我会用这个
html,身体{ 背景:#药剂; 最小高度:100%; 最小高度:100 vh; 溢出:汽车;// <-当你调整屏幕大小时，这是需要的 ｝ < html > 身体< > < /身体> < / html >
浏览器将使用min-height: 100vh，如果浏览器有点旧，则min-height: 100%将作为备用。
溢出:auto是必要的，如果你想要身体和html扩大他们的高度当你调整屏幕的大小(例如移动大小)
关于底部的额外空间:你的页面是ASP ?网络应用程序?如果是这样，标记中可能几乎所有内容都被包装了。不要忘记设置表单的样式。添加溢出:隐藏;到窗体可能会删除底部的多余空间。
在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 */
}
所有的答案都是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>
这里是JSfiddle演示。
这里更新
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
