Question

我试图让内容随着内容的显示而下降，但我得到的是页面中间的页脚，就在导航栏的下方，我希望它位于页面的最底部并且由内容自动推送，我尝试了这个教程here 但我不知道是否做得对，显然我没有，因为它不起作用，所以有人可以帮助我吗？

<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％;因为我相信它会在你的项目中为你节省bug。

粘滞页脚不起作用

2 个答案: