我试图把我的页脚粘贴在css的页面底部

本文介绍了我试图把我的页脚粘贴在css的页面底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我使用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;}推荐答案 CSS粘滞页脚示例或者，我在我的项目中广泛使用了这个：Or, I've used this one extensively in my projects: CSS粘滞页脚A CSS Sticky Footer重复的问题： CSS Sticky Footer CSS Sticky Footer实现的问题 使div始终保持页面底部的内容，即使有滚动条CSS Sticky FooterProblem with CSS Sticky Footer implementationMake div stay at bottom of page's content all the time even when there are scrollbars 这篇关于我试图把我的页脚粘贴在css的页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！