Problème de positionnement Div lié au positionnement relatif et absolu

Question

Le problème que je rencontre est lié à un pied de page que j'ai absolument positionné en bas de la page. Tout va bien jusqu'à ce que la copie sur la page commence à s'étendre plus loin sur la page, ce qui fait que mes puits de contenu s'étendent vers le bas, derrière le pied de page. Y at-il de toute façon que je puisse forcer mes puits de contenu à «pousser» le pied de page vers le bas de la page?

Voici le code html correspondant:

<div id="page"> 
     <div id="page_container"> 
     <div id="header"></div> 
     <div id="nav"></div> 
     <div id="main_content"> 
       <div id="left_column"></div> 
       <div id="right_column"></div> 
     </div> 
     </div> 
    </div> 
    <div id="footer"> 
    <div id="footer_container"> 
    </div> 
    </div> 

Et le CSS correspondant

#page   {width:100%;margin:0 0 10px 0; text-align:center;} 
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;} 
#header   {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;} 
#nav    {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;} 
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;} 
#footer   {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;} 
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;} 
#left_column  {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;} 
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;} 

Merci pour toute aide que vous pourriez être en mesure de donner!

Answer 1

Utilisez position: fixed; pour le pied de page, vous voudrez peut-être aussi d'avoir une padding-bottom pour votre body afin que le contenu ne sera pas aller en dessous.

Answer 2

Sortez la hauteur: 100% sur pageContainer - qui fixe le div à la hauteur de la fenêtre et non la hauteur du contenu.

Answer 3

Essayez ceci:

<style type="text/css"> 
html, body { margin:0; padding:0; height:100%; }  
#page_container { width:743px; margin:0 auto; } 
#header { height:87px; border:1px solid #000; } 
#footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;} 
#nav { height:29px; border:1px solid #000;} 
#left_column { width:230px; float:left; border:1px solid #000;} 
#right_column { width:490px; float:left; border:1px solid #000;} 

#page { min-height:100%; position:relative; } 
#main_content { padding-bottom:133px; } 
.clear { clear:both; } 
</style> 
<!--[if lt IE 7]> 
<style media="screen" type="text/css"> 
#container { 
    height:100%; 
} 
</style> 
<![endif]--> 

HTML (note - vous devez mettre #footer l'intérieur #page pour cette méthode de travail):

<div id="page"> 
    <div id="page_container"> 
     <div id="header">hhhh</div> 
     <div id="nav">nav</div> 
     <div id="main_content"> 
      <div id="left_column">lll</div> 
      <div id="right_column">rrr</div> 
      <div class="clear"></div> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footer_container">fffff</div> 
    </div>  
</div> 

Vous pouvez obtenir un aperçu exemple de travail ici: http://www.front-end-developer.net/examples/bottomfooter/footer.htm

Testé sur Chrome, Firefox, IE6, IE7, IE8 et Opera.