javascript - 使 div 适合浏览器页面

Question

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

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%;
    
}

<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 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>