绝对定位清晰的页脚

Question

I have 2 absolutely positioned div s inside a relative container, I plan on using JavaScript to toggle visibility

 .container { position:relative; } .section1 { position:absolute; top:0; left:0; right:0; bottom:0; } .section2 { position:absolute; top:0; left:0; right:0; bottom:0; } .section1 .div1 { background:green; } .section1 .div2 { background:purple; } .section1 .div3 { background:brown; } .section1 .div4 { background:grey; } .section2 .div1 { background:pink; } .section2 .div2 { background:gold; } .section2 .div3 { background:blue; } .section2 .div4 { background:orange; } .footer { background:lightblue; min-height:100vh; } 

 <div class="container"> <div class="section1"> <div class="div1"> This is Item 1 </div> <div class="div2"> This is Item 2 </div> <div class="div3"> This is Item 3 </div> <div class="div4"> This is Item 4 </div> </div> <div class="section2"> <div class="div1"> This is Item 1 </div> <div class="div2"> This is Item 2 </div> <div class="div3"> This is Item 3 </div> <div class="div4"> This is Item 4 </div> </div> </div> <div class="footer"> Footer </div> 

They are working correctly, but my footer is not. Do I need to add a clear?

Answer 1

Your footer has min-height 100vh . maybe you meant that for container? Try removing that, and move 100vh to container class.

Answer 2

I would look at applying a position property to your footer and removing the overall height thats been set against it.

Assuming you want your footer at the bottom, you can add the following CSS to it to help position it:

.footer {
  background: lightblue;
  position:absolute;
  bottom:0;
  width:100%;
}

 body{ margin:0; } .container { position: relative; margin:0;padding:0; } .section1 { position: absolute; top: 0; left: 0; width:100%; } .section2 { position: absolute; top: 0; left: 0; width:100%; } .section1 .div1 { background: green; } .section1 .div2 { background: purple; } .section1 .div3 { background: brown; } .section1 .div4 { background: grey; } .section2 .div1 { background: pink; } .section2 .div2 { background: gold; } .section2 .div3 { background: blue; } .section2 .div4 { background: orange; } .footer { background: lightblue; position:absolute; bottom:0; width:100%; } 

 <div class="container"> <div class="section1"> <div class="div1"> This is Item 1 </div> <div class="div2"> This is Item 2 </div> <div class="div3"> This is Item 3 </div> <div class="div4"> This is Item 4 </div> </div> <div class="section2"> <div class="div1"> This is Item 1 </div> <div class="div2"> This is Item 2 </div> <div class="div3"> This is Item 3 </div> <div class="div4"> This is Item 4 </div> </div> </div> <div class="footer"> Footer </div>