I am trying to stick my footer to the bottom of the page in css

Question

I am using zurbs foundation to build my site, and I am trying to figure out how to create a footer that sticks to the bottom of the page. I have tried absolute positioning but it overlaps the content. The div footer I am trying to place at the bottom is inside the container however I could move it where needed. You can view the site live here

html code

<div class="container">
    <div class="row">
        <div id="logo" class="two columns">
            <a href="http://anderskitson.ca/mrskitson2012"><img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/logo.png" alt="Mrs Kitson's Kinderegarten"/></a>
        </div>
        <div id="title" class="ten columns">
        <p><span>Mr's</span> Kitson's Kindergarten</p>
        </div>
    </div>
    <div class="row">
        <div class="ten columns">
            <div class="mainNav"><ul><li class="page_item page-item-19"><a href="http://anderskitson.ca/mrskitson2012/blog/">blog</a></li><li class="page_item page-item-17"><a href="http://anderskitson.ca/mrskitson2012/calendar/">calendar</a></li><li class="page_item page-item-9"><a href="http://anderskitson.ca/mrskitson2012/curriculum/">curriculum</a></li><li class="page_item page-item-15"><a href="http://anderskitson.ca/mrskitson2012/forms/">forms</a></li><li class="page_item page-item-2 current_page_item"><a href="http://anderskitson.ca/mrskitson2012/">home</a></li><li class="page_item page-item-13"><a href="http://anderskitson.ca/mrskitson2012/news/">news</a></li><li class="page_item page-item-11"><a href="http://anderskitson.ca/mrskitson2012/resources/">resources</a></li><li class="page_item page-item-21"><a href="http://anderskitson.ca/mrskitson2012/video/">video</a></li><li class="page_item page-item-7"><a href="http://anderskitson.ca/mrskitson2012/visible/">visible</a></li></ul></div>
        </div>
    </div>
    <div class="row">
        <div class="11 columns offset-by-one">
        <img src="http://anderskitson.ca/mrskitson2012/wp-content/themes/mrskitson2012/images/kidsDrawings.jpg" alt="Kids Drawings"/>
        </div>
    </div>

    <div id="footer" ></div>
<!-- container ends-->
</div>

css code

#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: absolute; bottom:0;}

score 4 · Accepted Answer · edited May 23 '17 at 12:11

4

This is your best bet:

CSS Sticky Footer Example

Or, I've used this one extensively in my projects:

A CSS Sticky Footer

Duplicate questions:

edited May 23 '17 at 12:11

Community

1
1

answered Mar 19 '12 at 16:48

JohnB

18,046
16
98
110

I have tried css sticky footer, and I can't get it to work. I will try again and post the code if it does not. Thanks. – Cool Guy Yo Mar 19 '12 at 17:00

score 0 · Answer 2 · edited Dec 19 '12 at 14:04

0

You are using foundation, which alters the bottom:0 absolute positioning. Proof: try getting rid of the foundation css call in the header, and see you thing adjusting.

edited Dec 19 '12 at 14:04

Brian Driscoll

19,373
3
46
65

answered Dec 19 '12 at 13:45

xxx

1

score 0 · Answer 3 · answered Mar 19 '12 at 17:16

0

You just need to add

html { height:100%; }

you have it on your body, but not your html tag.

answered Mar 19 '12 at 17:16

corymathews

12,289
14
57
77

I am trying to stick my footer to the bottom of the page in css

3 Answers3

Linked