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

Question

I am making an app for myself with ElectronJS. I have managed to get the footer to stay at the bottom of the viewport when it is large, but when I shrink the viewport the footer overlaps some of the content on my page. Can someone please help me? I have attached some pictures to show you all with what I am dealing with.

What I want.

What I am getting with small viewport.

Here is my CSS for my footer class that I am using:

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

Your help is greatly appreciated.

Answer 1

if you want client see footer all the time in small viewport use position: fixed , and if you want footer only at the end of all contents in small view port use @media in css like this:

@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%;
           }
}

also if you want use position: absolute check height of .footer in inspect and add height: "num"px; or use height: 100% .

you can use min-height and max-height in @media like this:

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