0

I want to make a sticky footer on my website. It has to be positioned either on the bottom of the page, or when more text is added, it has to be positioned below the text. I already looked at some other questions, but I can't seem to fix it with these answers

This is my code: http://jsfiddle.net/9XjLL/

HTML: 

<body>
    <div id="header">
        This is the header
        <hr>
    </div>

    <div id="menu">
        <br>
        <b>Menu</b><br>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
        <br>
    </div>
    <div id="body">
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> body </p>
        <p> end </p>
    </div>
</body>
<footer>
    Footer
</footer>

CSS: 

html, body { 
    height:         100%; 
    background:     #E6E6E6;
    margin:         0;
    padding:        0;
}

#header {
    text-align:     center;
    height:         50px;
    position:       static;
    top:            0px;
    z-index:        15;
    background:     #B2B2B2;
}

#body{
    text-align:     left;
    margin-left:    210px;
    margin-right:   200px;
    margin-bottom:  5px;
    background:     #B2B2B2;
}

#menu {
    width:          200px;
    text-align:     left;
    left:           0px;
    position:       absolute;
    background:     #B2B2B2;
}

footer {
    text-align:     center;
    height:         30px;
    position:       relative;
    bottom:         0; 
    width:          100%;
    background:     #B2B2B2;
}

It will probably be something stupid, but i can't figure it out...

Thanks in advance!

Fingashpitzzz
  • 169
  • 4
  • 20
  • 4
    Did you have any chance to take a look at **Ryan Fait's [Sticky Footer](http://css-tricks.com/snippets/css/sticky-footer/)**? – Hashem Qolami Jan 20 '14 at 13:17
  • Check my answer in here: [http://stackoverflow.com/questions/20370396/align-div-to-bottom-of-the-page/20370880#20370880](http://stackoverflow.com/questions/20370396/align-div-to-bottom-of-the-page/20370880#20370880) – Ruddy Jan 20 '14 at 13:22
  • the following link may help you regarding this issue. [Footer css position][1] [1]: http://stackoverflow.com/questions/21155833/footer-position-issue-css/21156261#21156261 – Green Wizard Jan 20 '14 at 13:31

2 Answers2

1

I have found a sort of a solution. I added/changed the following lines:

#body{ 
   min-height: 83%;
}

footer{
   position: static;
}

Thanks to everyone for helping out!

Fingashpitzzz
  • 169
  • 4
  • 20
0

You may like to refer to this below.

body{
   margin:0px;
   background:#000;
}
.footer-cont {
   width:100%;
   position:fixed;
   bottom:0px;
}
.footer {
   height:50px;
   background:#F0F0F0;
   border:1px solid #CCC;
   width:960px;
   margin:0px auto;
}
.content {
   width:960px;
   background: #F0F0F0;
   border: 1px solid #CCC;
   height: 2000px;
   margin: 70px auto;
}
D. WONG
  • 59
  • 7