css - 底部的粘性页脚

Question

我的页脚有问题，它没有被内容插入，我已经尝试用绝对值代替相对值，但没有成功，我正在尝试使用 bottom:0;但它也不起作用，这是我的 CSS 代码:

html, body {


width:100%;
min-height:100%;
background-image: url(../img/bg.png);
background-repeat: repeat;

}   

* {
margin: 0px;
padding: 0px;
}
a, img {
border:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
 }






#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
position:relative;  
}


#foot {
width: 100%;
height:200px
position:absolute;
bottom:0;
background-image:url(../img/foot.png);
background-repeat:no-repeat;


}




#banner {
min-height: 100%;
margin:0;
 padding:0;
position: relative;
top: 24px;
background-image: url(../img/banner2.png);
background-repeat:no-repeat;
width:100%;
height:173px;

}


#navigation {
height: 60px;
position: relative;
left: auto;
width: 100%;
top: 23px;
margin: 0px;
padding: 0px;
z-index:1;
border: none;   
}

#categoria {
position: absolute;
width: 710px;
height: 240px;
z-index: 0;
left: -29px;
top:30px;
padding: 0px;
z-index:1;



}

.othergames{
position: absolute;
top: -13px;
width: 740px;
height: 251px;
background-image: url(../img/otherg.png);
background-repeat: no-repeat;
z-index:1;
left: -43px;


}

.othergames-back{
position: absolute;
top: -11px;
width: 730px;
height: 247px;
background-color:#FFF;
left: -37px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

}


#texto{
height: 10px;
text-align:center;
width: 50px;
margin: 0px;
padding: 0px;
left: 34px;
top: 243px;
}

#apDiv1 {
position: absolute;
left: -3px;
top: 3px;
width: 209px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}

#like {
position: relative;
left: -3px;
top: 550px;
width: 215px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}



#apDiv2 {
position: absolute;
left: 220px;
top: 60px;
width: 862px;
height: 482px;
z-index: 0;
padding: 0px;

}

#apDiv4 {
margin: 0;
padding: 0;
position: absolute;
left: -6px;
top: 90px;
width: 201px;
height: 499px;
z-index: 1;
}

和html代码:

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

 <div id="navigation">








<div id="apDiv4">






 </div>



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

<div id="like">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Legend-of-Games/476628629090111" data-width="215" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>



<div id="apDiv2">



   <script>
 (function($){
      $(window).load(function(){
        $("#apDiv2").mCustomScrollbar();


    });
 })(jQuery);
</script>

<div align="center" id="thumb">

<div id="screen_game">

<a href="legendofgames/gameview.php?recordID=<?php echo $row_GameData['idGames']; ?>">  <img style="border-radius:5px;border:thin solid #FFF;" src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>"  width="160" height="130"/></a>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>


</div>

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



</div> 

</div>
</div>


<footer >
<div id="foot"></div>

</footer>

</body>    

Answer 1

由于您有一些不可用的背景图像和内容，我生成了一些并将其插入到 <section> 中ID 为 container .正如您在 the fiddle 中看到的那样，我刚刚将页脚设置为 bottom: 0; 处的固定位置 block 元素，这意味着它将始终位于底部。

CSS:

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: green;
}

尽情享受页面的其余部分吧!