Mise en page CSS qui utilise 100% de hauteur

Question

Les gars, j'ai une mise en page CSS que j'utilise qui a un en-tête, un pied de page et une barre latérale sur la gauche. Cela fonctionne très bien, mais le seul problème est que je voudrais que la barre latérale et le pied de page s'étendent jusqu'au bas de l'écran s'il n'y a pas assez de contenu pour remplir le contenu principal. Comment est-ce que je fais cela en CSS? J'ai posté le css ici afin que vous puissiez voir ce que je travaille avec:

<style type="text/css"> 
    body 
    { 
     font: 100% Verdana, Arial, Helvetica, sans-serif; 
     background: #666666; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
     color: #000000; 
    } 
    .twoColHybLtHdr #container 
    { 
     width: 80%; 
     background: #FFFFFF; 
     margin: 0 auto; 
     border: 1px solid #000000; 
     text-align: left; 
    } 
    .twoColHybLtHdr #header 
    { 
     background: #DDDDDD; 
     padding: 0 10px; 
    } 
    .twoColHybLtHdr #header h1 
    { 
     margin: 0; 
     padding: 10px 0; 
    } 
    .twoColHybLtHdr #sidebar1 
    { 
     float: left; 
     width: 8em; 
     background: #EBEBEB; 
     padding: 15px 0; 
    } 
    .twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p 
    { 
     margin-left: 10px; 
     margin-right: 10px; 
    } 
    .twoColHybLtHdr #mainContent 
    { 
     margin: 0 20px 0 9em; 
    } 
    .twoColHybLtHdr #footer 
    { 
     padding: 0 10px; 
     background: #DDDDDD; 
    } 
    .twoColHybLtHdr #footer p 
    { 
     margin: 0; 
     padding: 10px 0; 
    } 
    .fltrt 
    { 
     float: right; 
     margin-left: 8px; 
    } 
    .fltlft 
    { 
     float: left; 
     margin-right: 8px; 
    } 
    .clearfloat 
    { 
     clear: both; 
     height: 0; 
     font-size: 1px; 
     line-height: 0px; 
    } 
</style> 

Et un exemple de comment l'utiliser:

<div id="container"> 
    <div id="header" style="text-align: center"> Header goes here </div> 
    <div id="sidebar1">Sidebar is here</div> 
    <div id="mainContent">Main Content here</div> 
    <br class="clearfloat" /> 
    <div id="footer">Footer Here</div> 
</div> 

Answer 1

Commander pieds de page collants

http://ryanfait.com/sticky-footer/ http://www.cssstickyfooter.com/

<div id="wrap"> 

    <div id="main" class="clearfix"> 

    </div> 

</div> 

<div id="footer"> 

</div> 

et

* {margin:0;padding:0;} 



html, body, #wrap {height: 100%;} 

body > #wrap {height: auto; min-height: 100%;} 

#main {padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

/* CLEAR FIX*/ 
.clearfix:after {content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;} 
.clearfix {display: inline-block;} 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */ 

Genre de double CSS: fixed to bottom and centered

Answer 2

Vous devriez regarder le min-height CSS property, soyez toutefois prudent car il est pas pris en charge correctement sur tous les navigateurs (notamment IE .. - comme si cela nouvelles à personne)

Vous pouvez également consulter CSS min-height hacks on Google

Answer 3

tak e un coup d'oeil à http://ryanfait.com/sticky-footer/ vous aurez besoin d'ajuster légèrement votre code car tout le contenu à part le pied de page doit être dans un div wrapper. Josh

Answer 4

Il ca n être fait en utilisant display:table avec 100% de hauteur, mais naturellement IE ne supporte pas non plus cela. Je fais souvent des mises en page de table en utilisant divs avec la table des noms de classes, tr et td et ensuite obtenir IE pour remplacer ces classes avec l'étiquette équivalente. De cette façon, je contourne toute la table comme un débat de mise en page. Si vous ne vous souciez pas de la sémantique, vous pouvez toujours ignorer les puristes et faire des choses comme ça avec de vraies tables. C'est une chose d'être un puriste du CSS, mais c'est une religion coûteuse lorsque le plus grand navigateur de part de marché est un produit obsolète avec la technologie des années 90.