我正在使用 zurbs Foundation 来构建我的网站，并且我正在尝试弄清楚如何创建一个粘在页面底部的页脚。我尝试过绝对定位，但它与内容重叠。我试图放置在底部的 div 页脚位于容器内，但我可以将其移动到需要的地方。您可以实时查看该网站here http://anderskitson.ca/mrskitson2012
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 code
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: absolute; bottom:0;}
这是你最好的选择：
- CSS 粘性页脚示例 http://www.cssstickyfooter.com/
或者，我在我的项目中广泛使用了这个：
- CSS 粘性页脚 http://ryanfait.com/sticky-footer/
重复问题：
- CSS 粘性页脚 https://stackoverflow.com/questions/3906065/css-sticky-footer
- CSS 粘性页脚实现的问题 https://stackoverflow.com/questions/1112082/problem-with-css-sticky-footer-implementation
- 使 div 始终停留在页面内容的底部，即使有滚动条 https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
