Question

我试图在我的网页上实现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;}

Answer 1

更新第45行foundation.css上的css

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

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

Answer 2

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

Answer 3

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

Answer 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 */
        }

我想让css粘性页脚工作

4 个答案: