Couleur d'arrière-plan pour ci-dessous le pied de page uniquement (inconnu taille de la zone)

J'ai une question très simple situation que je n'ai jamais connaître la meilleure réponse à toutes mes années de développement:

Il y a un fixe-hauteur de la div conteneur qui contient également le pied de page (donc pas de collant, pied de page) avec un arrière-plan blanc. Le pied de page est également une hauteur fixe. Le corps contient une image de fond qui s'estompe à une couleur, permet de dire que l'orange. Sur les grands navigateurs, il y aura de la place en dessous du pied de page, qui sera aussi le orange, couleur de la carrosserie. Comment puis-je faire juste que l'espace en dessous du pied de page blanche, sans affecter la couleur de la carrosserie au-dessus du pied de page?

Voici un exemple de code HTML:

<body>
<div class="container">
    Container Content
    <div class="footer">
        Footer Content
    </div>
</div>
</body>

et CSS:

body {
    background: #ffaa00 url(image.png) no-repeat;
}
.container {
    height: 1200px;
    margin: 0 auto;
    width: 960px;
}
.footer {
    background-color: #fff;
    height: 120px;
}

Exemple de l'image (contenu principal brouillée par demande du client):
Couleur d'arrière-plan pour ci-dessous le pied de page uniquement (inconnu taille de la zone)

Voir la bande orange en dessous du pied de page? Je voudrais qu'être blanc. Nous ne savons jamais ce que la hauteur de l'espace. Toutes les suggestions? CSS solutions privilégiées, mais jQuery pourrait fonctionner aussi.

Vous pouvez prendre le pied de page du récipient et placer le récipient de la couleur d'arrière-plan orange. Supprimer orange de corps
Pourriez-vous expliquer pourquoi vous êtes déterminé à garder le corps en orange au lieu d'utiliser une orange conteneur. Vous semblez avoir du mal avec l'idée que le pied de page est un "flottante" ou de l'objet imbriqué, plutôt que linéaire de la conclusion du document. Il fait beaucoup plus de sens en tant que blanc de document avec orange en haut. Faire une orange document avec un fond blanc invoque trop de questions. HTML n'a pas été conçu pour être rigide. Fixe et absolue de positionnement sont des compromis qui viennent avec des risques. Essayez de remplir à 100% de l'espace restant nécessite l'activation de JavaScript, CSS hacks pour les différents navigateurs et la laideur des autres.

OriginalL'auteur Ivan Durst | 2013-12-16