html - 粘性页脚不起作用

Question

我试图让我的页脚在内容出现时下降，但我得到的是页面中间的页脚，就在我的导航栏正下方，我希望它在页面的最底部并自动推送根据内容，我在这里尝试了这个教程， 但我不知道它是否正确，显然我没有，因为它不起作用，所以有人可以帮助我吗？

<div id="wrapper">
<div id="banner">

  <img src="../img/banner2.png" width="1024" height="173" longdesc="../index.php" alt=""/>     </div>
<div id="navigation"><?php include('C:/xampp/htdocs/legendofgames/includes/navbar.php'); ?>


<div id="apDiv4">

<?php include('C:/xampp/htdocs/legendofgames/includes/menu_cat.php'); ?>


</div>


<div id="fb-root"></div>

<div id="like">
<div class="fb-like-box"></div></div>



<div id="apDiv2">



 <!-- TemplateBeginEditable name="gamespace" -->
  <h1>&nbsp;</h1> 
 <!-- TemplateEndEditable -->

  <!-- TemplateBeginEditable name="EditRegion4" -->
  <!-- TemplateEndEditable --></p>



</div>

<div id="apDiv1"><img src="../img/lateralb2.png" width="209" height="592" alt=""/>  

</div>

 </div>

<footer class="site-footer">


</footer> 

CSS 代码：

body {

width:100%;
height:100%;
background-color: #FFF;
background-image: url(../img/bg.png);
background-repeat: repeat;
}

#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
top: 5px;
margin-bottom: -200px;
display: block;

}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 200px; 
}

.site-footer {
background-image: url(../img/foot.png);
}

Answer 1

使用绝对位置并使底部 = 0

.site-footer {
background-image: url(../img/foot.png);
position: absolute; 
bottom: 0 ;
left: 0;
right: 0;
} 

Answer 2

看起来不错，您需要做的就是使用绝对定位和 0 的底部。

.site-footer {
    background-image: url(../img/foot.png);
    position: absolute; 
    bottom: 0;
    width:100%
}

确保使用宽度：100%；因为我确信它会在以后的项目中使您免于出现错误。