1

I tried to make every one of these divs fits to the browser page in height and width. I also need to attached to the edge of the page when I see them until I scroll down to the next div. How do I do that?

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>
Manfred Radlwimmer
  • 13,257
  • 13
  • 53
  • 62
Sandy Gubran
  • 41
  • 2
  • 9
  • Possible duplicate of [Div height 100% and expands to fit content](http://stackoverflow.com/questions/9537838/div-height-100-and-expands-to-fit-content) – jobbert May 17 '16 at 12:55

2 Answers2

0

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>
Poonam
  • 549
  • 4
  • 15
0

.container has to have height: 100%; otherwise the DIVs in it won't get their 100% height.

Johannes
  • 64,305
  • 18
  • 73
  • 130