My footer does not stay at the bottom of the page

Question

I am using Wordpress and I can't get my footer to stay at the bottom of the webpage. I have a page.php which means that I use the same interface for all of my pages except the page content which I edit in Wordpress. On some pages it works fine but on the pages where the content is less (less text vertically if that makes sense) it is in the middle of the page and creates a white space at the bottom. This is the CSS I'm using for the footer atm.

.footer-nav {
    display: block;
    width: 100%;
    height: 200px;
    background-image: url(/pics/bannerbottom.jpg);
    background-size: 100% 120%;
    padding: 20px;
    position: relative;
    clear: both;
    bottom: 0;
    margin-top: 100px;
    float: left;
}

.foot-container {
    bottom: 0;
}

and the HTML is just a simple div.

<div class="foot-container">
    <div class="footer-nav"></div>
</div>

This is because your contains are not enaugh to send the footer down. in this case, you need to position your .footer using position:absolute. let me know if you want to know more. — HamiD, Aug 27 '20 at 11:34
There is nothing wrong with your code - that is standard web page behaviour. If you want to change this behaviour, you can CSS to make your footer "sticky" so it it always visible at the very bottom of the screen, or you make the page at least full height. Let us know what behaviour you want so we can help. — FluffyKitten, Aug 27 '20 at 11:34
Can you add image original link in question in background image url() — , Aug 27 '20 at 11:36

score 0 · Answer 1 · answered Aug 27 '20 at 11:36

You could try adding a min height to your content.

For example, if this is your content:

<div class="wrapper">
  Content goes here
</div>

Add the following css to (in this case), .wrapper:

.wrapper{
  min-height:100%;
}

You could of course alter the amount of the min-height as you want.

JKD · Answer 2 · 2020-08-27T12:47:01.677

0

The following code will place your footer always at the bottom, doesn't matter how much content you have:

 body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: max-content max-content 1fr max-content;
    grid-template-columns: 100%;
}

edited Aug 27 '20 at 12:47

answered Aug 27 '20 at 11:38

JKD

1,279
1
6
26

score 0 · Answer 3 · answered Aug 27 '20 at 11:53

0

I would make the footer's position fixed:

.foot-container {
    bottom: 0;
    position: fixed;
    width: 100%;
}

html, body {
  min-height: 100%;
}

answered Aug 27 '20 at 11:53

Lajos Arpad

64,414
37
100
175

My footer does not stay at the bottom of the page

3 Answers3