CSS hauteur de 100% question

Je sais qu'il ya beaucoup de questions à propos d'un css 100% de la hauteur du problème.
Cependant j'ai essayé de suivre les instructions et encore de la hauteur n'est pas à 100%,
j'ai donc pensé que je pourrais poser la question à nouveau.

Le site où l'on peut voir le problème est:

www.exendo.be

certains styles css:

html {
    height: auto !important;
    margin: 0;
    min-height: 100%;
    padding: 0;
}

body {
    background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
    height: auto !important;
    margin: 0;
    min-height: 100%;
    padding: 0;
    width: 100%;
}

wrapper {
    height: auto !important;
    min-height: 100%;
    position: relative;
}
footer-container {
    background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
    height:146px;
}

Comme vous pouvez le voir sur le site, le pied de page est trop haut sur la page.
Si je inspecter la page avec Firebug, je vois que le code html est de 100% de la hauteur, mais le corps de la balise n'est pas.
Le problème se produit sur Firefox et IE.

Si quelqu'un pouvait aider, ce serait super!

OriginalL'auteur denappel | 2011-06-30

  1. 5

    Un certain nombre de personnes ont proposé des position:absolute; bottom:0;

    Cela peut causer un problème si le contenu est plus grand que le contenant. La hauteur ne sera pas augmenter de sorte que le contenu ne sera plus ajustement et peut être coupée ou le résultat dans laide des barres de défilement.

    Si vous pouvez donner à une hauteur fixe pour le conteneur, ce qui est idéal étant donné que la hauteur:100% travaille ensuite sur l'élément enfant. Dans le cas où le contenu est trop grand, vous pouvez mettre un fond sur l'enfant avec overflow:visible sur le parent, de sorte que le contenu s'affiche toujours. Cela aide, mais il peut encore casser à moins que l'enfant est de la même largeur que le parent.

    Si cela ne fonctionne pas, je vous recommande d'utiliser min-hauteur en em ou en pixels. Cela permettra de s'assurer que la hauteur remplit le parent, et s'élargit si le contenu est trop long. Ce qui a le mieux fonctionné pour les commentaires des clients sur http://www.baka.ca

    OriginalL'auteur Frank Forte

  2. 2

    Je pense que ce l'article peut vous aider.

    Selon cet article:

    Attribuer "position:relative" à la votre "conteneur" div - page, de la page contenant ou emballage (je ne suis pas sûr de savoir laquelle des trois, juste essayer), puis "position:absolute; bottom:0;" à votre "pied de page-container" div.

    J'espère que vous aide.

    OriginalL'auteur a.m

  3. 0

    @denappel; donner html & body 100% height mettre footer à l'extérieur de votre main div wrapper & donner margin-bottom dans minus en fonction de la hauteur de pied de page.

    css:

    .wrapper {
    position: relative;
    width: 700px;
    font-size: 0.9em;
    margin: 0 auto -142px;
    background:yellow;
}
.header {
    height: 190px;
    background:green;
}

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background:red;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
.footer, .push {
    height: 142px;
}

    vérifier cet exemple
    http://jsfiddle.net/sandeep/tCdPX/3/

    ce fonctionnellement appelé stickyfooter

    merci pour l'astuce. J'ai essayé ceci (vous pouvez le vérifier sur exendo.être), mais pour une raison étrange, il se complique pas de travail. J'ai enlevé le margin:0 auto -142px; parce que d'autre le pied de page est venu encore plus élevé. La hauteur totale est pas encore utilisé, et je n'ai pas la moindre idée de pourquoi...

    OriginalL'auteur sandeep