使用小视口强制页脚停留在页面底部

【问题标题】：Force Footer to Stay at Bottom of Page With Small Viewport使用小视口强制页脚停留在页面底部
【发布时间】：2021-04-17 00:34:03
【问题描述】：

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

我想要什么。

我在小视口中得到了什么。

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

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

非常感谢您的帮助。

【问题讨论】：

删除 position: absolute 并让用户在向下滚动时看到页脚部分。或者向我们展示 HTML 代码以了解实际结构。

标签： html css electron

【解决方案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 检查.footer 的高度并添加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%;
           }
    }

【讨论】：