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):
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.
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
Vous devez vous connecter pour publier un commentaire.
Il n'y a pas de manière cohérente afin de garantir que chaque navigateur va remplir tout l'arrière-plan de l'espace à votre satisfaction si vous choisissez de descendre le chemin de tenter d'utiliser un nouvel objet de toute sorte de remplir l'espace.
La seule façon de garantir l'élargissement de la section de la couleur que vous voulez, c'est de définir l'arrière-plan du corps.
C'est un peu comme peindre un mur - corps de l'arrière-plan est généralement la première couche.
(Sauf si vous spécifiez un arrière-plan sur le code html, comme par Carlo Cannas la réponse ci-dessous.)
La section orange est logiquement la "deuxième couche" c'est un peu comme un concert de l'affiche collée sur le mur autour d'un chantier de construction. Donc, si vous voulez l'orange d'être pleine largeur, mais ont une largeur fixe le contenu, vous avez besoin de deux récipients, l'un à 100% de largeur, et un intérieur à votre choix de largeur fixe.
Essayer à la danse autour de la logique de couches et de nidification de ne pas aider - c'est comme d'essayer de créer un ruban de Möbius. Suite à une stricte logique vous donnera beaucoup plus de confiance dans les différents navigateurs.
C'est juste, j'ai changé d'habitude - je suis raisonnablement confiant corps, est la convention pour la couche de base depuis les premiers jours de html. Réglage de l'arrière-plan sur <html> devrait être relativement récent, ne serait-il pas?
Je sais que c'est étrange et rare, cependant, cette règle existe depuis le tout début de CSS: donner un coup d'oeil à la CSS1 spécifications (1996, pas exactement récente, non?) w3.org/TR/REC-CSS1-961217.html#the-canvas.
Très intéressant, merci!
C'est la réponse que je cherchais, merci.
OriginalL'auteur Tim Ogilvy
Généralement en fond de décor pour le HTML
body
élément devient l'arrière-plan de la toile, à moins que vous spécifier un arrière-plan différent detransparent
pour lahtml
élément. Donc, essayez de définir la couleur d'arrière-plan de l'élément racinewhite
.Si votre
body
a des marges que vous avez peut-être besoin de les ajuster, afin d'avoir le bon résultat.OriginalL'auteur Carlo Cannas
EDIT:
Je pense que la meilleure option est de recréer de la structure de base, de sorte que votre élément HTML a un fond blanc, et l'arrière-plan orange est ajouté à certains conteneur.
OriginalL'auteur Snade
Je ne suis pas sûr de le code exact mais je pense que quelque chose pourrait être fait à l'aide de la
dans
jQuery
. Depuis la hauteur de la fenêtre est toujours de 100% en jouant ce genre de choses et le pied de page, nous pouvons parvenir à une solution. Cela pourrait ne pas être le plus utile de commentaires parce que je ne suis pas vraiment un jQuery expert, mais je espère que cette aide.OriginalL'auteur Eric McWinNer
Ne pouvez-vous pas simplement de changer la structure un peu? Prendre le contenu dans un autre div par exemple.
HTML:
CSS:
Violon: http://jsfiddle.net/AbG62/
Imo, si vous ne voulez pas de la couleur d'arrière-plan pour être visible sur le fond, vous avez juste à ne pas définir une couleur de fond du corps, mais il suffit de mettre tout le contenu de divs.
OriginalL'auteur Kelu Thatsall
La façon de prendre la .le pied de page de la .div conteneur. Et puis enveloppez la .le pied de page dans un .footerwrapper avec une largeur de 100%, background-color: #FFF; de la sorte:
Et CSS :
Voici la Jfiddle: http://jsfiddle.net/3Erqf/
OriginalL'auteur MElliott