I am trying to insert my footer at the bottom of the page in css
I am using base zurbs 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've tried absolute positioning, but it overlaps the content. The footer I'm trying to position at the bottom is inside the container, however I could move it wherever 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 Kinderegarten"/></a>
</div>
<div id="title" class="ten columns">
<p><span>Mr's</span> Kitson 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;}
+3
Cool guy yo
source
to share
3 answers
This is your best bet:
- CSS Sticky Footer Example
Or I've used this in my projects:
- CSS Sticky Footer
Duplicate questions:
- CSS Sticky Footer
- Sticky Footer CSS Injection Issue
- Make a div at the bottom of the page content all the time, even if there are scrollbars
+4
JohnB
source
to share
You just need to add
html { height:100%; }
you have this on your body but not in your html tag.
0
corymathews
source
to share
You are using a foundation that changes the bottom: 0 absolute positioning. Evidence. Try to get rid of the css call in the header and see how you change.
0
xxx
source
to share