CODEWITHSUNDEEP
csssticky-footer
Amc_rtty
Amc_rtty

Reputation: 3813

How to stick a footer to bottom in css?

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.

Upvotes: 79

Views: 176460

Answers (16)

Luke Vo
Luke Vo

Reputation: 20798

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, 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;
}
<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

Upvotes: 5

Benjamin Toh
Benjamin Toh

Reputation: 19

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>

Upvotes: 0

mbokil
mbokil

Reputation: 3340

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.

Upvotes: 9

Vincent
Vincent

Reputation: 2169

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.

Upvotes: 0

Codemaker2015
Codemaker2015

Reputation: 15726

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

Upvotes: 2

Sherman Chen
Sherman Chen

Reputation: 329

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>

Upvotes: 0

Mohammad Abraq
Mohammad Abraq

Reputation: 99

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

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

Upvotes: 2

ndvo
ndvo

Reputation: 989

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

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

Upvotes: 8

Nick Larsen
Nick Larsen

Reputation: 18877

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

Upvotes: 65

Bhawna Malhotra
Bhawna Malhotra

Reputation: 490

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

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

Upvotes: 5

Abdelhameed Mahmoud
Abdelhameed Mahmoud

Reputation: 2138

The following css property will do it

position: fixed;

I hope this help.

Upvotes: 1

rzskhr
rzskhr

Reputation: 991

This worked for me:

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

Upvotes: 1

Chtioui Malek
Chtioui Malek

Reputation: 11515

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.

Upvotes: 2

Sheikh Naveed
Sheikh Naveed

Reputation: 325

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

worked for me

Upvotes: 17

Dillie-O
Dillie-O

Reputation: 29755

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.

Upvotes: -1

codedude
codedude

Reputation: 6549

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

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

Upvotes: 55

Related Questions