在这里:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

CSS3有一个新的方法。

 height:100vh

它使ViewPort 100%等于高度。

所以你的代码也应该如此

 body{
 height:100vh; 
 }

如果你想保持正文的边缘，不想要滚动条，使用下面的css:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

设置body {min-height:100%}将为您提供滚动条。

参见http://jsbin.com/aCaDahEK/2/edit?html,output上的演示。

我设计了div容器-通常是主体的唯一子元素，带有以下css

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: 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>

这里是JSfiddle演示。

对于真正的纯粹主义者来说，这种方法尊重浏览器的默认边距，并防止由其他方法产生的不需要的滚动，除了随着内容的增长而增长。在Chrome, Safari和Firefox中测试。背景只是做做样子……

html { 显示:flex; flex-direction:列; 高度:100%; 背景:红色; } 身体{ flex: 1; 背景:绿色; }