html - 使用小视口(viewport)强制页脚停留在页面底部

Question

我正在用 ElectronJS 为自己制作一个应用程序。当页脚很大时，我设法让页脚保持在视口(viewport)的底部，但是当我缩小视口(viewport)时，页脚会与页面上的一些内容重叠。有人可以帮帮我吗？我附上了一些图片，向大家展示我正在处理的事情。
我想要的是。
我用小视口(viewport)得到了什么。

这是我正在使用的页脚类的 CSS:

/* Footer Styling */
.footer {
    position: absolute; bottom: 0px;
    width: 100%;
}

非常感谢您的帮助。

Answer 1

如果您希望客户始终在小视口(viewport)中看到页脚，请使用 position: fixed ,
如果您只想在小视口(viewport)中的所有内容的末尾添加页脚，请使用 @media在这样的CSS中:

@media (min-width: 0) and (max-width: 768px){
    .footer {
       position: relative; 
       /*bottom: 0px;*/
       width: 100%;
       }
}
@media (min-width: 768px){
        .footer {
           position: fixed; 
           bottom: 0;
           left: 0;
           height: 200px;
           width: 100%;
           }
}

如果你想使用 position: absolute检查 .footer 的高度在检查并添加 height: "num"px;或使用 height: 100% .
您可以使用 min-height and max-height在 @media像这样:

.footer {
                   position: fixed; 
                   bottom: 0;
                   left: 0;
                   height: 200px;
                   width: 100%;
                   }
@media (min-height: 650px){
        .footer {
           position: relative; 
           /*bottom: 0px;*/
           width: 100%;
           }
    }