使用小視口強制頁腳停留在頁面底部

Question

我正在用 ElectronJS 為自己制作一個應用程序。 當頁腳很大時，我設法讓頁腳保持在視口的底部，但是當我縮小視口時，頁腳會與頁面上的一些內容重疊。 有人可以幫幫我嗎？ 我附上了一些圖片，向大家展示我正在處理的事情。

我想要的是。

我用小視口得到了什么。

這是我正在使用的頁腳 class 的 CSS：

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

非常感謝您的幫助。

Answer 1

如果您希望客戶始終在小視口中看到頁腳，請使用position: fixed ，如果您希望僅在小視口中的所有內容的末尾使用頁腳，請使用 css 中的@media ，如下所示：

@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 check height of .footer in inspect 並添加height: "num"px; 或使用height: 100% 。

您可以像這樣在@media中使用min-height and max-height ：

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