Absolute positioning clear footer

Question

I have 2 absolutely positioned divs 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?

your container has no height (all elements positioned absolutely inside an element means that element will not have any height as in effect it has no children to give it height) so the footer is behaving as it should. You say the footer is not working correctly, but don't actually say how you want it to work. I would also suggest your content is not working as you want as section 2 is hiding section 1 — Pete, Dec 14 '18 at 15:05
Is there any reason _both_ sections need to use `position: absolute`? remove it from one and the container will no longer collapse to zero height. — Turnip, Dec 14 '18 at 15:08
I am confused, the footer is not within the container so I had assumed it would sit below — fightstarr20, Dec 14 '18 at 15:11
it is below - just your container has no height and doesn't hide any overflow - those sections are overflowing out of the container which covers part of the footer - put overflow-hidden on the container and see what happens — Pete, Dec 14 '18 at 15:12
I would refer to this previously asked question: https://stackoverflow.com/questions/13545947/position-absolute-and-parent-height — Francisco Garcia, Dec 14 '18 at 15:17
Are you after a sticky footer? http://jsfiddle.net/dojmygwq/ Or just make the visible section relative instead of absolute — Pete, Dec 14 '18 at 15:18
If you are just wanting to toggle the visible section, I don't see the need for absolute positioning http://jsfiddle.net/dojmygwq/1/ — Pete, Dec 14 '18 at 15:25

score 0 · Answer 1 · answered Dec 14 '18 at 15:04

0

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

answered Dec 14 '18 at 15:04

Nemanja G

1,760
6
29
48

score 0 · Answer 2 · answered Dec 14 '18 at 15:14

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>

Absolute positioning clear footer

2 Answers2