Existe-t-il un moyen de rendre la largeur d'un DIV enfant plus large que le DIV parent à l'aide de CSS?
Existe-t-il un moyen d'avoir une DIV enfant dans un conteneur parent DIV plus large que son parent? La DIV enfant doit avoir la même largeur que la fenêtre de visualisation du navigateur.
Voir l'exemple ci-dessous: 
L'enfant DIV doit rester en tant qu'enfant du parent div. Je sais que je peux définir des marges négatives arbitraires sur la div enfant pour la rendre plus large, mais je ne peux pas trouver le moyen de la rendre à 100% plus large du navigateur.
Je sais que je peux le faire:
.child-div{
margin-left: -100px;
margin-right: -100px;
}
Mais j'ai besoin que l'enfant ait la même largeur que le navigateur, ce qui est dynamique.
Mettre à jour
Merci pour vos réponses, il semble que la réponse la plus proche jusqu’à présent consiste à définir la position de l’enfant DIV: absolute et de définir les propriétés left et right sur 0.
Le problème suivant que j'ai est que le parent a la position: relative, ce qui signifie que les propriétés left et right sont toujours relatives au div parent et pas au navigateur, voir l'exemple ici: jsfiddle.net/v2Tja/2
Je ne peux pas enlever la position relative du parent sans visser tout le reste.
Utiliser le positionnement absolu
.child-div {
position:absolute;
left:0;
right:0;
}
Une solution plus moderne à cette question consiste à utiliser les unités de fenêtre vw et calc().
Définissez la width de l'élément enfant sur 100% de la largeur de la fenêtre d'affichage, ou 100vw. Déplacez ensuite l'élément enfant de 50% de la largeur de la fenêtre - moins de 50% de la largeur de élément parent} _ - pour le faire rencontrer le bord de l'écran.
body,
html,
.parent {
height: 100%;
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
.parent {
width: 50%;
max-width: 800px;
background: grey;
margin: 0 auto;
position: relative;
}
.child-element {
position: relative;
width: 100vw;
left: calc(-50vw + 50%);
height: 50px;
background: blue;
}<div class='parent'>
parent element
<div class='child-element'>child-element</div>
</div>La prise en charge du navigateur pour vw et pour calc () peut généralement être considérée comme IE9 +.
Remarque: Cela suppose que le modèle de boîte est défini sur border-box . Sans border-box, vous devrez également soustraire les rembourrages et les bordures, faisant de cette solution un véritable gâchis.
Je cherche depuis longtemps une solution à ce problème. Idéalement, nous voulons que l'enfant soit plus grand que le parent, mais sans connaître à l'avance les contraintes du parent.
Et j’ai enfin trouvé une brillante réponse générique ici . Copier mot pour mot:
L’idée ici est la suivante: Poussez le conteneur au centre exact du fenêtre du navigateur avec la gauche: 50% ;, puis tirez-la vers l’arrière gauche avec une marge négative de -50 vw.
.child-div {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
Sur la base de votre suggestion initiale (définition des marges négatives), j'ai essayé et proposé une méthode similaire utilisant des unités de pourcentage pour la largeur du navigateur dynamique:
HTML
<div class="grandparent">
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
</div>
</div>
</div>
CSS:
.child-div{
margin: 0 -100%;
padding: 0 -100%;
}
.parent {
width: 60%;
background-color: red;
margin: 0 auto;
padding: 50px;
position:relative;
}
.grandparent {
overflow-x:hidden;
background-color: blue;
width: 100%;
position:relative;
}
Les marges négatives laisseront le contenu s'écouler de la DIV parent. Par conséquent, je règle le padding: 0 100%; sur Repousser le contenu aux limites originales du DIV Chlid.
Les marges négatives feront également en sorte que la largeur totale du .child-div soit étendue hors de la fenêtre de visualisation du navigateur, ce qui entraînera un défilement horizontal. Par conséquent, nous devons couper la largeur d'extrusion en appliquant un overflow-x: hidden à une DIV de grand-parent (qui est le parent de la division parent):
Voici le JSfiddle
J'ai essayé le left: calc(-50vw + 50%) de Nils Kaspersson; cela fonctionnait parfaitement dans Chrome & FF (pas encore sûr de IE) jusqu'à ce que je découvre que les navigateurs Safari ne le font pas correctement. J'espère qu'ils ont résolu ce problème dès que j'aime cette méthode simple.
Cela peut également résoudre votre problème où l'élément DIV parent doit être position:relative
Les 2 inconvénients de cette méthode de contournement sont les suivants:
- Nécessite un balisage supplémentaire (c'est-à-dire un élément de grands-parents (tout comme la méthode d'alignement vertical des bons vieux tableaux, n'est-ce pas ...)
- Les bordures gauche et droite de la DIV enfant ne seront jamais affichées, simplement parce qu'elles sont en dehors de la fenêtre d'affichage du navigateur.
S'il vous plaît laissez-moi savoir si vous rencontrez un problème avec cette méthode;). J'espère que ça aide.
J'ai utilisé ceci:
HTML
<div class="container">
<div class="parent">
<div class="child">
<div class="inner-container"></div>
</div>
</div>
</div>
CSS
.container {
overflow-x: hidden;
}
.child {
position: relative;
width: 200%;
left: -50%;
}
.inner-container{
max-width: 1179px;
margin:0 auto;
}
vous pouvez essayer la position: absolue. et donnez la largeur et la hauteur, en haut: "l'axe des y à partir du haut"
Ajoutant à la solution de Nils Kaspersson, je résous également la largeur de la barre de défilement verticale. J'utilise 16px à titre d'exemple, soustrait de la largeur du port d'affichage. Cela évitera l'apparition de la barre de défilement horizontale.
width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));
J'avais un problème similaire… .. Le contenu de l'élément enfant était supposé rester dans l'élément parent alors que l'arrière-plan devait étendre la largeur de la fenêtre d'affichage.
J'ai résolu ce problème en créant l'élément enfant position: relative et en y ajoutant un pseudo-élément (:before) avec position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Le pseudo-élément reste derrière l'enfant en tant que pseudo-élément d'arrière-plan. Cela fonctionne dans tous les navigateurs (même IE8 + et Safari 6+ - sans possibilité de tester des versions plus anciennes).
Petit exemple de violon: http://jsfiddle.net/vccv39j9/
La solution sera alors la suivante.
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent{
width: 960px;
margin: auto;
height: 100vh
}
.child{
position: absolute;
width: 100vw
}
Pour que child div soit aussi large que le contenu, essayez ceci:
.child{
position:absolute;
left:0;
overflow:visible;
white-space:nowrap;
}
.parent {
margin:0 auto;
width:700px;
border:2px solid red;
}
.child {
position:absolute;
width:100%;
border:2px solid blue;
left:0;
top:200px;
}
Flexbox peut être utilisé pour rendre un enfant plus large que son parent avec trois lignes de CSS.
Seules les variables display, margin-left et width de l'enfant doivent être définies. margin-left dépend de la width de l'enfant. La formule est la suivante:
margin-left: calc(-.5 * var(--child-width) + 50%);
Les variables CSS peuvent être utilisées pour éviter de calculer manuellement la marge de gauche.
Démo n ° 1: Calcul manuel
.parent {
background-color: aqua;
height: 50vh;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
.child {
background-color: pink;
display: flex;
}
.wide {
margin-left: calc(-37.5vw + 50%);
width: 75vw;
}
.full {
margin-left: calc(-50vw + 50%);
width: 100vw;
}<div class="parent">
<div>
parent
</div>
<div class="child wide">
75vw
</div>
<div class="child full">
100vw
</div>
</div>Démo n ° 2: Utiliser les variables CSS
.parent {
background-color: aqua;
height: 50vh;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
.child {
background-color: pink;
display: flex;
margin-left: calc(-.5 * var(--child-width) + 50%);
width: var(--child-width);
}
.wide {
--child-width: 75vw;
}
.full {
--child-width: 100vw;
}<div class="parent">
<div>
parent
</div>
<div class="child wide">
75vw
</div>
<div class="child full">
100vw
</div>
</div>Je sais que c’est vieux, mais si vous voulez y répondre, vous le feriez comme ceci:
Débordement masqué sur un élément contenant l'élément parent, tel que le corps.
Donnez à votre élément enfant une largeur beaucoup plus large que votre page et positionnez-le en absolu à gauche de -100%.
Voici un exemple:
body {
overflow:hidden;
}
.parent{
width: 960px;
background-color: red;
margin: 0 auto;
position: relative;
}
.child {
height: 200px;
position: absolute;
left: -100%;
width:9999999px;
}
Heres également un JS Fiddle: http://jsfiddle.net/v2Tja/288/
En supposant que le parent ait une largeur fixe, par exemple #page { width: 1000px; } et centré #page { margin: auto; }, vous voulez que l'enfant s'adapte à la largeur de la fenêtre du navigateur, vous pouvez simplement le faire:
#page {
margin: auto;
width: 1000px;
}
.fullwidth {
margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
width: 100vw;
}