Html 底部的页脚，仅当向下滚动超过主体元素/超过窗口高度的100%时可见？

我希望

主体元素

在打开网站时处于焦点位置，而

页脚元素

位于主体底部。因此，

footer元素

必须位于

body元素

之后。我不想让它们重叠。我想向下滚动到

页脚元素

position:absolute

不是答案。或者至少我不能用它做我想要的。 现在，

页脚

与

正文

和

底部容器

重叠

将

#容器

从

位置更改为：绝对位置至<代码>位置：相对

使子div:

顶部容器

，

中心容器

，

底部容器

移动到窗口顶部并相互重叠

---

这在没有JavaScript或jQuery的情况下可以实现吗？

根据注释进行更新-

使页脚位置相对将允许将其放置在容器元素之后。将容器的最小高度设置为100vh会使该容器至少具有窗口渲染屏幕值的100%，而将其定义为100%则不会，因为它不知道父高度。我知道CSS中有一个很奇怪的

#container{
    position:relative;
    min-height:100vh;
    width: 100%;
    margin:0;
    padding:0;
}

.footer{
    position:relative;
}

这些css更改将更正容器和页脚的显示

---

至于你所面临的其他职位问题，我会考虑不要在任何事情上都采取绝对的立场。通过内容和css的外观，您可以基本使用浮动或网格来实现该布局。在缩放浏览器时，使用百分比作为偏移始终会使冲突保持打开状态。我建议制作这些实际值，如4em等。如果不了解更多关于显示器预期的信息，我真的无法给出更多建议。仅此而已：对于所有设备来说，绝对疯狂可能非常难以平衡。

您的HTML无效。除了结束html元素之外，在结束正文元素之后不能有任何内容。你有你的页脚在那里的moment@j08691谢谢你指出这一点。我没有注意到。不幸的是，它没有解决任何问题。在j08691正确注释的基础上，只需将#container min height 100vh

#container{minheight:100vh；position:relative；}

并将页脚放在DOM中的#container元素之后。确保将其更改为相对位置。@KaiQing添加了

min height:100vh

到

#容器

没有任何变化。@我添加

后的开清最小高度：100vh

改为

#容器

，并将

页脚

从

位置：绝对

改为

位置：相对

它按照我的要求工作。非常感谢。你能解释一下为什么

min height:100vh

或

height:100vh

有效，但

min height:100%

和

height:100%

无效吗？

html {
    min-height: 100%;
    margin: 0; 
    padding: 0; 
}

body {
    margin: 0; 
    padding: 0; 
    font-family: sans-serif;
    height: 100%;
    /* overflow: hidden; */
    background-color: rgba(20,20,20,0.3);
}

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.top-container, .bottom-container, .center-container, .dropwdown-container {
    position: absolute;
}

.top-container {
    left: 30%;
    top: 0;
    height: 100px;
    width: 40%;
}

.center-container {
    left: 20%;
    top: 10%;
    width: 60%;
    height: 250px;
    background: rgba(0,0,0,0.2);
}

.bottom-container {
    left: 10%;
    bottom: 0; 
    height: 350px;
    width: 80%;
    background: rgba(0,0,0,0.2);
}
footer {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
}

.footer ul {
    flex: left;
    margin: 0;
    padding: 0;
}

.footer li {
    display: inline;
}
.footer img {
    width:5%;
}

#container{
    position:relative;
    min-height:100vh;
    width: 100%;
    margin:0;
    padding:0;
}

.footer{
    position:relative;
}