我试图把我的页脚粘贴在css的页面底部 [英] I am trying to stick my footer to the bottom of the page in css
本文介绍了我试图把我的页脚粘贴在css的页面底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用zurbs基础构建我的网站，我试图找出如何创建一个脚注粘在页面的底部。我已经尝试绝对定位，但它重叠的内容。我想要放在底部的div页脚是在容器内，但我可以移动它在需要的地方。您可以在此处查看网站。
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代码
<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代码
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: absolute; bottom:0;}
推荐答案
或者，我在我的项目中广泛使用了这个：
Or, I've used this one extensively in my projects:
- A CSS Sticky Footer
重复的问题：
- CSS Sticky Footer
- Problem with CSS Sticky Footer implementation
- Make div stay at bottom of page's content all the time even when there are scrollbars
这篇关于我试图把我的页脚粘贴在css的页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
