How to stick a footer to bottom in css? [duplicate]

Question

I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.

In the HTML i got this simple structure

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

Here is the css code that is relevant for the css footer problem:

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.

Thank you for any suggestion in advance.

Regards,

---

thank you all for your answers. it worked with:

position:absolute;
    width:100%;
    bottom:0px;

setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.

Lilongwe

stackoverflow.com/search?q=css+footer – Squeegee

in 2019 it is very easy to do with flexbox – Coldhearted

Answer 1

Try setting the styles of your footer to position:absolute; and bottom:0;.

Deflower

because what you're doing is not the classic sticky footer that sticks to the bottom of the page and if the page is 100% visible to the bottom of the window. – Roper

thats correct, even if the page is longer than the fold, the footer will start to cover some of the content and remain visible at all times with this method – Deflower

Here's a sort of expanded version of this same solution: https://mcmap.net/q/266199/-my-footer-floats – Lengthen

but on tablets or 10 inch laptops it even overlapes the above the fold content. – Reahard

I would add that if the footer is nested into a top-level component, then this top-level component should have the property "position: relative" in the corresponding css file, like that: .top{position: relative; .footer{position: absolute; bottom: 0px;}} – Starchy

Answer 2

#Footer {
  position:fixed;
  bottom:0;
}

That will make the footer stay at the bottom of the browser window no matter where you scroll.

Metamorphosis

And precisely what I was looking for ;) – Eclecticism

you might wanna add a width: 100%; to that to make it full width – Dezhnev

Answer 3

#Footer {
position:fixed;
bottom:0;
width:100%;
}

worked for me

Decisive

Answer 4

Assuming you know the size of your footer, you can do this:

    footer {
        position: sticky;
        height: 100px;
        top: calc( 100vh - 100px );
    }

Damnify

Replacing 'fixed' Worked for me, footer { position: fixed; height: 100px; top: calc( 100vh - 100px ); } – Bearskin

Using css native variable eg. --footer-height: 100px; make code easy to use :) – Makings

+1 for using sticky instead of fixed. Sticky leaves the footer positioned relative to its container, whereas fixed places the footer relative to the viewport. – Brundage

Answer 5

I think a lot of folks are looking for a footer on the bottom that scrolls instead of being fixed, called a sticky footer. Fixed footers will cover body content when the height is too short. You have to set the html, body, and page container to a height of 100%, set your footer to absolute position bottom. Your page content container needs a relative position for this to work. Your footer has a negative margin equal to height of footer minus bottom margin of page content.

Leathaleather

This doesn't answer the question. – Pastorship

Answer 6

#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

Puncheon

Answer 7

If you use the "position:fixed; bottom:0;" your footer will always show at the bottom and will hide your content if the page is longer than the browser window.

Fouquiertinville

That does work nicely and is much less troublesome than other solutions (especially if you have a variable-height footer), but the obvious downside is that it uses JS. – Skyjack

Answer 8

For modern browser, you can use flex layout to ensure the footer stays at the bottom no matter the content length (and the bottom won't hide the content if it is too long)

HTML Layout:

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

CSS:

html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

Demo: https://codepen.io/datvm/pen/vPWXOQ

Strictly

you wrote the correct solution and you could update it as here explained – Coldhearted

Answer 9

So a Mixed Solution from @nvdo and @Abdelhameed Mahmoud worked for me

footer {
    position: sticky;
    height: 100px;
    top: calc( 100vh - 100px );
}

Bearskin

Answer 10

Try position attribute with fixed value to put your division in a fixed position. Following is the code for putting your footer at bottom of the page.

footer {
    position: fixed; 
    bottom: 0;
}

Newsletter

position: fixed could overlap the main content where position: sticky would push the content – Anaemic

Answer 11

This worked for me:

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}

Anjaanjali

Answer 12

The following css property will do it

position: fixed;

I hope this help.

Sieber

Answer 13

Try adding margin-top: auto; to the footer. This approach addresses any overflow that may be caused by other methods.

html, body { height: 100%}
body {
display: flex;
flex-direction: column;
}


header {
min-height: 80px;
outline: 2px solid red;
display: flex;
justify-content: center;
align-items: center;
}

main {
min-height: 280px;
outline: 2px solid green;
display: flex;
justify-content: center;
align-items: center;
}

footer {
min-height: 80px;
outline: 2px solid blue;
display: flex;
justify-content: center;
align-items: center;
}

<header>Header</header>
<main>main</main>
<footer style="margin-top: auto;">footer</footer>

Ceria

I think this should be a comment as it seems to be no stand-alone-answer. – Enchanting

Answer 14

The following code works, which is from w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html> 

Kinematics

Answer 15

A sticky footer without covering your content.

If you position your footer using "bottom:0px", it will always stay at the bottom of the viewport even if the viewport is too small to display all the content, which means it will cover part of your content.

If you want your footer stuck to the bottom, but you always want it to remain below the content of your container, then you do this:

.body{height:100%}  // Or whatever container you want
.footer{position:sticky;top:100vh}

The 100vh will keep the footer at the bottom when there is enough space to see it, but because it's not an absolute position it will not push up above the bottom of the container's content.

Brundage

Answer 16

I had a similar issue with this sticky footer tutorial. If memory serves, you need to put your form tags within your <div class=Main /> section since the form tag itself causes issues with the lineup.

Dustin

could you pease elaborate your solution could be correct but i did not understand it completely: put the form tags where exactly? – Lilongwe

:: Looks at answer:: Look at that, it filtered out the tag. Updated the answer. Does that make sense? – Dustin

Andrei is talking about sticky footer, what you're implementing is not a sticky footer as such. – Roper