Html 我试图让css粘性页脚工作_Html_Css_Sticky Footer

Html 我试图让css粘性页脚工作

html css

Html 我试图让css粘性页脚工作,html,css,sticky-footer,Html,Css,Sticky Footer,我曾尝试在我的页面上实现css sticky footer，但它似乎不起作用。页脚位于内容下方，但不粘在页面底部。您可以在www.anderskitson.ca/mrskitson2012上查看我正在尝试在其上实时实施的网站这是我的html代码，为了简单起见，我去掉了一些代码 <div class="container"> <div id="main" class="row"> <div class=" twelve columns ">

我曾尝试在我的页面上实现css sticky footer，但它似乎不起作用。页脚位于内容下方，但不粘在页面底部。

您可以在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>

尝试

bottom:0；最小宽度：100%作为CSS的一部分
我添加了帖子：固定；显示：块；最小宽度：100%；底部：0结果很好。如果你要这样做，我可能也会让你的footer.gif顶部透明。或者尝试使用透明的.png文件
 尝试以下HTML代码：
<body>
        <div class="container">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">  
       </div>
</body>

在线45基础上更新CSS。CSS 
html {
    font-size: 62.5%;
    height:100%
}

查看此链接上的屏幕截图：查看我的答案并尝试一下，如果有任何问题或我在哪里落后，请告诉我。非常感谢，这很简单。
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 */
        }

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