我正在尝试让 css 粘性页脚工作答案

【问题标题】：I am trying to get css sticky footer to work我正在尝试让 css 粘性页脚工作
【发布时间】：2012-03-20 02:05:19
【问题描述】：

我尝试在我的页面上实现 css 粘性页脚，但它似乎不起作用。页脚位于内容下方，但不粘在页面底部。 http://www.cssstickyfooter.com/

您可以在 www.anderskitson.ca/mrskitson2012 上查看我正在尝试实施的网站

这是我的 html 代码，为简单起见删除了一些代码

<div class="container">
    <div id="main" class="row">
     <div class=" twelve columns ">
      <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>
   </div>
<!-- container ends-->
</div>
<div id="footer" ></div>

这是我的 CSS 声明

.container{position:relative; min-height:100%; }
#main{ overflow:auto; padding-bottom: 300px; }
#footer{ background-image: url('../images/footer.jpg'); height:300px; width:100%; position: relative; margin-top: -300px; clear:both;}

【问题讨论】：

查看我的答案并尝试一下，如果有任何问题或我在某些地方滞后，请告诉我。

标签： html css sticky-footer

【解决方案1】：

更新第45行foundation.css上的css

html {
    font-size: 62.5%;
    height:100%
}

查看此链接上的屏幕截图：http://img854.imageshack.us/img854/9064/footerpos.jpg

【讨论】：

非常感谢它是如此简单。

【解决方案2】：

尝试将 bottom:0;min-width:100%; 作为 CSS 的一部分

【讨论】：

【解决方案3】：

我添加了postion:fixed;display:block;min-width:100%;bottom:0;，结果很好。如果您要这样做，我可能还会使您的 footer.gif 顶部透明。或者尝试一个具有透明度的 .png 文件。

【讨论】：

【解决方案4】：

试试这个 HTML 代码：

<body>
        <div class="container">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">  
       </div>
</body>

CSS 代码：

html, body {
height: 100%;
}     

.container {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
        }
        .footer, .push {
            height: 142px; /* .push must be the same height as .footer */
        }

【讨论】：