适合div到浏览器页面

Question

我试图让这些div中的每一个都适合浏览器页面的高度和宽度。当我看到它时，我还需要附加到页面的边缘，直到我向下滚动到下一个div。我该怎么做？

＆＃13;

＆＃13;

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.container {
    height: auto;
    width: 100%;
    color: #fff;
}
.div1 {
    background: #555;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    }
.div2 {
    background: #ccc;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.div3 {
    background: #c55;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.div4 {
    background: #006;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
}

＆＃13;

<div class="container">
  <div class="div1">DIV 1</div>
  <div class="div2">DIV 2</div>
  <div class="div3">DIV 3</div>
  <div class="div4">DIV 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.container {
    height: 100%;
    width: 100%;
    color: #fff;
}
.div1 {
    background: #555;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    }
.div2 {
    background: #ccc;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.div3 {
    background: #c55;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.div4 {
    background: #006;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
}

<div class="container">
  <div class="div1">DIV 1</div>
  <div class="div2">DIV 2</div>
  <div class="div3">DIV 3</div>
  <div class="div4">DIV 4</div>
</div>

Answer 2

.container必须height: 100%;，否则其中的DIV不会 100％的身高。