如果需要，你也可以使用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 {
    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
{
  height: 100%;
  margin: 0;
  padding: 0;
}

所有的答案都是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元素的高度设置为100%。

html, 
body {
    height: 100%;
}

主体通过其父(HTML)查看如何缩放动态属性，因此HTML元素也需要设置它的高度。

然而，body的内容可能需要动态更改。 将min-height设置为100%将实现这一目标。

html {
  height: 100%;
}
body {
  min-height: 100%;
}

CSS3有一个新的方法。

 height:100vh

它使ViewPort 100%等于高度。

所以你的代码也应该如此

 body{
 height:100vh; 
 }