CSS Min-hauteur ne fonctionne pas sur tous les navigateurs

Question

J'ai récemment travaillé sur un site. J'essaye d'obtenir une bordure qui entoure tout mon contenu et est au moins aussi grande que la page est. Mon #Container est la div qui devrait se développer pour remplir la page entière. J'essaie d'utiliser la hauteur minimale: 100%; dans mon css, mais pour une raison quelconque, il n'est pas l'expansion de la frontière dans toute la page. This est mon site Web. La page d'accueil est une configuration html de base.

<div id="Container"> 
    <div id="header"> 
    <div id="menu"> 
     <ul id="navbar"> 
      <li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li> 
      <li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li> 
      <li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li> 
      <li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li> 
      <li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li> 
      <li><a id="nav6" class="nav-text" href="#">Info</a></li> 
      <li><a id="nav7" class="nav-text" href="#">About</a></li> 
      <li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li> 
     </ul> 
    </div> 
    </div>  
    <div id="content"> 
    <h3>Home Page</h3> 
    </div> 
    <div id="footer"> 
    <div id="footertext">Copyright &copy; UsedAtCollege.com</div> 
    </div> 
</div> 

Mon CSS est assez simple aussi. J'ai une réinitialisation CSS, que je ne pense pas l'affecte parce que je l'ai sorti et il avait toujours le problème.

* { 
    margin: 0; 
    padding: 0; 
} 
#Container { 
    width:980px; 
    min-height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:0px; 
    border-style:solid; 
    border-width:1px; 
    border-color:rgb(154,154,154); 
} 

C'est donc le contrôle CSS pour la div enveloppant ma page entière dans.

Je veux juste savoir si quelqu'un sait pourquoi le min-hauteur ne reçoit pas la frontière vers le bas jusqu'au fond de l'écran?

Answer 1

Ajouter à votre CSS

html, body { 
    height: 100%; 
} 

Answer 2

Quelque chose comme Firebug ou DOM-inspecteur serait utile dans de tels cas. Si vous lancez Firebug, et que vous voyez le contenu de votre page dans Firebug, vous remarquerez que votre corps ne s'étend pas sur toute la page, il ne s'étend que jusqu'à la moitié de la longueur de la page, la même position que la bordure inférieure montrant. C'est parce que le corps ne se développera que selon son contenu, le contenu étant minimal ici, le corps ne se dilate pas plus, et le min-height: 100% aussi.

Vous pouvez contourner ce problème en enveloppant la totalité du contenu de la page dans une enveloppe absolument positionné div, définissant ses top et left valeurs 0px, la hauteur et la largeur à 100%. Ensuite, la frontière s'étendrait jusqu'au bas de la page. Bien sûr, Firebug montrerait encore le corps en expansion jusqu'à une demi-page seulement, car les éléments absolument placés ne contribuent pas aux dimensions naturelles. Pour cela, vous devrez utiliser le positionnement relatif, et ajuster margin-top à la valeur requise afin d'avoir l'effet.