绝对定位清晰的页脚

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移至容器类。

Answer 2

我将研究在您的页脚上应用position属性，并删除针对该页脚设置的总体高度。

假设您希望页脚位于底部，则可以向其中添加以下CSS以帮助放置它：

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