Html 绝对定位净脚

我在一个相对容器中有两个绝对定位的

div

s，我计划使用JavaScript切换可见性

.container{
位置：相对位置；
}
.第1节{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.第2节{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.第1条第1款{
背景：绿色；
}
.第1条第2款{
背景：紫色；
}
.第1条第3款{
背景：棕色；
}
.第1条第4款{
背景：灰色；
}
.第2条第1款{
背景：粉红色；
}
.第2条第2款{
背景：金；
}
.第2条第3款{
背景：蓝色；
}
.第2条第4款{
背景：橙色；
}
.页脚{
背景：浅蓝色；
最小高度：100vh；
}

这是项目1
这是第2项
这是第3项
这是第4项
这是项目1
这是第2项
这是第3项
这是第4项
页脚

您的页脚具有

最小高度100vh

。也许你是说集装箱？尝试删除该属性，并将100vh移动到container类。

我将考虑对页脚应用position属性，并删除针对其设置的总高度

假设您希望页脚位于底部，您可以向其添加以下CSS以帮助定位页脚：

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

正文{
保证金：0；
}
.集装箱{
位置：相对位置；
边距：0；填充：0；
}
.第1节{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
.第2节{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
.第1条第1款{
背景：绿色；
}
.第1条第2款{
背景：紫色；
}
.第1条第3款{
背景：棕色；
}
.第1条第4款{
背景：灰色；
}
.第2条第1款{
背景：粉红色；
}
.第2条第2款{
背景：金；
}
.第2条第3款{
背景：蓝色；
}
.第2条第4款{
背景：橙色；
}
.页脚{
背景：浅蓝色；
位置：绝对位置；
底部：0；
宽度：100%；
}

这是项目1
这是第2项
这是第3项
这是第4项
这是项目1
这是第2项
这是第3项
这是第4项
页脚

您的容器没有高度（所有元素绝对位于元素内部意味着该元素没有任何高度，因为实际上它没有子元素赋予它高度），因此页脚的行为与它应该的一样。您说页脚工作不正常，但实际上并没有说您希望它如何工作。我还建议您的内容没有按您所希望的那样工作，因为第2节隐藏了第1节。是否有任何理由两个部分都需要使用

位置：绝对
？将其从一个容器中取出，容器将不再塌陷到零高度。我感到困惑，页脚不在容器内，因此我假设它将位于下方-只是您的容器没有高度，并且没有隐藏任何溢出-这些部分从容器溢出，覆盖了页脚的一部分-将溢出隐藏在容器上，看看会发生什么情况我会参考前面的问题：