Keep footer at the bottom of the page (with scrolling if needed)

footer at bottom of page but not fixed
how to fix footer at bottom of page with css
keep footer at bottom of page when scrolling css
footer at bottom of page, but not fixed in bootstrap
sticky footer on scroll
css grid footer at bottom
push footer to bottom
footer fixed-bottom bootstrap 4

I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.

I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html

However when I use the following, the footer is showing halfway my long page for some reason.

position: absolute; bottom:0 

I have both short pages and long pages and I would like it to be at the bottom of both of them.

How can I keep the footer at the bottom on a long page as well?

Fiddle

I've created these Fiddles to show the problem and test the code. Please post a working example with your solution.

My footer css:

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }

I would suggest the "sticky footer" approach. See the following link:

http://css-tricks.com/snippets/css/sticky-footer/

How to create footer to stay at the bottom of a Web page , To create a footer to stay at the bottom of a web page We can fix the position of it at the bottom of the webpage so that, if you scroll down that webpage you can still view the footer from any position at the page. To make a footer fixed at the bottom of the webpage, you could use position: fixed. To create a footer to stay at the bottom of a web page We can fix the position of it at the bottom of the webpage so that, if you scroll down that webpage you can still view the footer from any position at the page. To make a footer fixed at the bottom of the webpage, you could use position: fixed. Syntax: #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } Example:

Replace Height with overflow:auto; & give body a position

html,body {
    position:relative; <!--Also give it a position -->
    margin:0;
    padding:0;
    overflow:auto; <!-- HERE -->
}

Position the footer to be relative to body

/* --- Footer --- */
.footerbar { 
    position: relative; <!-- HERE -->
    width: 100%;
    bottom: 0;
    color: white;
    background-color: #202020;
    font-size: 12px; 
}

It at all possible it is always better to relatively position your elements, especially your main elements, like footers in this case.

Short Page Edit
min-height:400px; <!-- Give this a real number like 400px 
                  or whatever you want...dont leave it to 100% as -->
}

Sticky Footer, Five Ways, But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window. It's not to be confused with position: fixed; which can be used to “stick” an element in place even if the page scrolls. It's that bottom margin plus the height of the footer that need to be added together to� We just need a few lines of CSS to make the footer remain fixed at the bottom of the screen. We simply need to apply a fixed position and set that position to 0 pixels from the bottom. Set the width and some other CSS properties to customize the look of the footer.

There is an excellent footer tutorial here.

The demo page is here.

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules:

.footerbar {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

CSS Footer, even with scrolling window - HTML & CSS, So if the window scrolls down, it will be right at the bottom. #bottom { position: fixed; width:100%; height:25px; text-align:center; bottom:0px;� On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space. 100% valid CSS with no hacks

We have been struggling with this issue for some time. The div with in several nested divs coupled with hacks and patches was turning into a nightmare for us. There were always surprises that required more hacks and more patches. here is what we have settled for:

css:

html, body  {
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: #6f643a;
    font-family: Arial;
    font-size: 11pt; 
}

form {
   height: 100%;
}    

body:

<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0"  width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" align="center" >
         contents goes here
        </td>
    </tr>
    <tr>
        <td valign="top" bgcolor="gray" align="center" style="padding:20px">
            <font color="#FFFF00">copyright:Puppy</font>
            footer goes here
        </td>
    </tr>
</table>

That is all you need. - if you are using asp.net don't ignore form height.

Get down! How to keep footers at the bottom of the page, When an HTML page contains a small amount of content, the footer can but this time you need to scroll down to the end of the page to see it. When a page contains a large amount of content, the footer is pushed down off the viewport, and if you scroll down, the page ‘ends’ at the footer. However, if the page has small amount of content, the footer can sometimes ‘cling’ to the bottom of the content, floating halfway down the page, and leaving a blank space underneath.

html,body {
    margin:0;
    padding:0;
    height:100%;
}
.content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footerbar {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

If IE7

<!--[if lt IE 7]>
<style type="text/css">
    .content { height:100%; }
</style>
<![endif]-->

How to keep your footer where it belongs ?, For a quick fix, you can absolutely position the footer at the bottom of the page. But this comes with its own downside. If the content grows larger� My jquery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise: Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.

How to Always Keep the Footer at the Bottom of A Page, Meaning that we don't want the footer to go above the height of our browser, when we don't Duration: 10:01 Posted: 06-Apr-2017 Following up on How to keep footers at the bottom of the page by Matthew James. I figured out that there’s a much easier way to do that technique using Viewport units. Also when using older…

how to keep the <footer> at the bottom of the screen on large , How do I keep the footer element at the bottom of the screen no about a footer that stays on the bottom even when scrolling if so here is an� The footer is set to absolute, sticking to the bottom: 0 of the page-container it is within. This is important, as it is not absolute to the viewport, but will move down if the page-container is taller than the viewport. As stated, its height, arbitrarily set to 2.5rem here, is used in the content-wrap above it. And there you have it.

Keep that damn footer at the bottom - ZERO — ☁, Following up on How to keep footers at the bottom of the page by Matthew James . “When an HTML page contains a small amount of content, the footer write what's necessary for keeping your footer always at the bottom. It works when we sticky the footer at the bottom of the page, and the footer will always stay at the bottom of the page even content is less or more. But the sticky isn’t required always. If the page has good enough content to the full fill the content area according to screen size, then you may don’t need to it.

Comments
  • updated link for Ryan Fait sticky footer codepen.io/griffininsight/pen/OMexrW
  • this method worked nicely for me, but the page is not always "scrollable"
  • Great solution even in the end of 2019! Without flex and other nice features. Thanks!
  • @tryptofame, according with an example -- no, not always scrollable.
  • What do you mean with give it a position? I don't see any change when using your suggestion. Please post the full code to make it work. Edit: I didn't see the footer yet. Now it works for the long page, however the short page is now having the problem.
  • you do not need to use min-height and height....just use min-height, and give it a number ALSO might I add....dont worry about "ie6", I would worry more about mobile view.
  • I know that it is an old comment, but thank you! I had an issue with the footer not staying at the bottom, and then I realized that my body and container not even expanding no matter how big the content is. So I used overflow: auto; and it worked.
  • Now here's the thing. I think I've already got the min-height and height of 100% like they showed. However if you look at my long page, the footer isn't showing nice.
  • This link is dead.
  • I like how the footer background goes all the way to the bottom on a short page.
  • I've added your suggestions to the examples. I'm afraid that it didn't solve the problem on a long page.
  • This indeed fixes the long page. However it creates a new problem for the short page. See these Fiddles that I made for the long page and for the shortpage