html - 绝对定位清除页脚

Question

我在一个相对容器中有 2 个绝对定位的 div，我计划使用 JavaScript 来切换可见性

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

它们工作正常，但我的页脚不是。我需要添加清除吗？

Answer 1

您的页脚有 min-height 100vh。也许你的意思是容器？尝试删除它，并将 100vh 移动到容器类。