Comment faire un div enveloppé remplir la fenêtre horizontalement?

J'ai un div qui est contenu par un autre div centré de 960px. J'ajoute un fond à la div interne qui devrait s'étendre horizontalement jusqu'aux bords de la fenêtre, échappant essentiellement aux limites de son conteneur. Si j'applique une marge négative importante et une quantité égale de remplissage, cela fonctionne sur le côté gauche, mais le côté droit provoque l'apparition d'une barre de défilement. Est-ce que quelqu'un sait comment je peux y parvenir sans causer de barres de défilement?Comment faire un div enveloppé remplir la fenêtre horizontalement?

Source

2010-04-26 okalex

Pourquoi voulez-vous que l'arrière-plan du div INNER s'étire pour remplir toute la fenêtre? Il semble que vous voulez faire cela avec la div OUTER. Ai-je bien compris la question? –

Oui, normalement je le ferais, mais c'est pour un thème Wordpress, et le contenu est enveloppé par ce div externe. La div interne est dans le contenu et il y a d'autres éléments dans le contenu qui n'auront pas l'arrière-plan. J'espère que je me suis expliqué correctement. – okalex

Merci pour l'aide, tout le monde, mais la plupart de ces solutions ont créé plus de difficultés pour positionner les éléments plus bas dans la page. J'ai fini par adopter une approche différente et tirer la div qui avait besoin de l'arrière-plan hors de la div wrapper. Ce n'est pas idéal parce que maintenant je ne peux pas afficher le contenu du message dans cette div interne, mais ça va marcher. À votre santé, – okalex

Je place toujours ma feuille de superposition DIV à l'extérieur de l'enveloppe de contenu, de sorte qu'elle ne soit pas contrainte par la mise en page.

Si vous êtes encadré (sans jeu de mots), vous pouvez ajouter ce DIV en utilisant JavaScript, en le plaçant n'importe où dans le DOM que vous voulez.

Source

2010-04-26 19:06:59

Il semble que la div externe soit définie sur (ou héritée) overflow: auto plutôt que overflow: visible.

Source

2010-04-26 19:13:35 Raugturi

Vous pouvez positionner la div intérieure absolument:

CSS

.outerdiv { width: 960px; background: #999; height: 50px; } 
.innerdiv { position: absolute; top: 100px; left: 0; background: #ccc; width: 100%; }

HTML

<div class="outerdiv">This is in the outer div 
<div class="innerdiv">This is in the inner div</div> 
</div>

ou mieux encore, déplacer la div d'avoir le corps du document tel qu'il est parent.

Source

2010-04-26 19:17:56 Mottie

Comment faire un div enveloppé remplir la fenêtre horizontalement?

Répondre

Questions connexes