我正在尝试将页脚粘贴到 css 中的页面底部答案

【问题标题】：I am trying to stick my footer to the bottom of the page in css我正在尝试将页脚粘贴到 css 中的页面底部
【发布时间】：2012-04-04 04:13:53
【问题描述】：

我正在使用 zurbs 基础来构建我的网站，并且我正在尝试弄清楚如何创建一个贴在页面底部的页脚。我尝试过绝对定位，但它与内容重叠。我试图放置在底部的 div 页脚位于容器内，但是我可以在需要的地方移动它。您可以查看现场直播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 footer sticky-footer

【解决方案1】：

这是你最好的选择：

CSS Sticky Footer Example

或者，我在我的项目中广泛使用了这个：

A CSS Sticky Footer

重复问题：

【讨论】：

我已经尝试过 css 粘性页脚，但我无法让它工作。如果没有，我会再试一次并发布代码。谢谢。

【解决方案2】：

你只需要添加

html { height:100%; }

你有它在你的身体，但不是你的 html 标签。

【讨论】：

【解决方案3】：

您正在使用基础，它会改变底部：0 的绝对定位。证明：尝试去掉 header 中的基础 css 调用，看看你的东西调整。

【讨论】：