Hauteur maximale de 100% entre l'en-tête et le pied de page

Je suis en train de créer une page web avec un en-tête/pied de page (100% de largeur, 145px hauteur), une "zone principale" entre l'en-tête/pied de page (100% de la largeur, de la dynamique de la hauteur), et un récipient autour du contenu qui est unique couleur d'arrière-plan (860px la largeur, la dynamique de la hauteur, mais est toujours "flush" contre le pied de page).

(Voir l'Exemple pour un visuel)

Le problème que j'ai c'est que je n'arrive pas à avoir le "conteneur de contenu" toujours être de niveau avec le pied de page quand il ya un minimum de contenu. À l'aide d'une installation comme l' (exemple d'origine) résultats dans le pied de page flottant sur le contenu si il y a un respectable/'normale' d'un montant de contenu ou si la fenêtre est redimensionnée.

Et le code CSS Suivant les résultats dans un écart entre le contenu et le pied de page.

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

Comment puis-je rendre le contenu du conteneur être à la hauteur totale de l'écran lorsque le contenu est minime et ont le pied de page de "coller" au bas de la page, tout en étant dynamique pour redimensionner de manière appropriée si il y a une quantité normale de contenu (pied de page est toujours au fond du contenu)?

Merci!

source d'informationauteur user2339983

  1. 12

    VIOLON: http://jsfiddle.net/3R6TZ/2/

    Violon De Sortie: http://fiddle.jshell.net/3R6TZ/2/show/

    CSS

    html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

    HTML

    <div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

    Mise à JOUR

    La #content-spacer-top et #content-spacer-bottom sont utilisés pour compléter les #div du contenu sans l'aide de rembourrage ou de marge, ce qui permettrait d'augmenter la taille de la boîte passé de 100% à hauteur de causer des problèmes.

    En CSS3, il est le box-sizing propriété (plus d'info ici) qui permet de résoudre ce problème, mais je suis en supposant que vous ne voulez pas dépendre de l'CSS3.

    MODIFIER

    Ajout d'une correction et testé en bas à IE7

    Mise à JOUR 2

    Autre méthode utilisant :before et :after pseudo-éléments à la place de l'entretoise divs:
    http://jsfiddle.net/gBr58/1/

    Ne fonctionne pas dans la version IE7 ou 6, et de travailler dans IE8, une <!DOCTYPE> doit être déclarée (selon w3schools.com), mais le HTML est agréable et propre

    Mise à JOUR 3 (Désolé pour toutes les mises à jour)

    Mis à jour à travailler jusqu'à IE6. Je ne suis pas normalement dérange pas que mon entreprise n'a pas de support de IE6, mais c'est une solution facile...

  2. 0

    Je pense que vous avez besoin de la position: fixe sur le pied de page:

    footer {
    width: 100%;
    height: 30px;
    position:fixed;
    bottom:0;
}