Comment puis-je étendre un div enfant à largeur d'écran de 100% si le div conteneur est plus petit?

l'élément parent de toute la page est un div centré limité à une largeur maximale de 960px. Tous les autres éléments sur la page sont les enfants de ce div parent. La structure simplifiée est la suivante:

<div id="parent">
  <div id="something"></div>
  <div id="wide-div></div>
  <div id="something-else></div>
</div>

alors que le div parent ne devrait pas s'étendre au-delà d'une largeur de 960px, le div que j'ai appelé" wide-div " ici devrait remplir toute la largeur de l'écran. Il contient une seule image qui est plus large que le 960px, et il devrait définir une couleur de fond différente pour l'ensemble de la largeur de l'écran.

Je ne peux pas facilement sortir cette div de la div mère, cela gâcherait d'autres parties de mon agencement et cela rendrait l'ensemble plutôt maladroit.

j'ai trouvé quelques astuces pour y parvenir, mais aucune ne semblait répondre à mes exigences. Ma conception est réactive, ou du moins j'essaie d'y arriver. Les astuces que j'ai trouvées reposaient sur la connaissance de la taille des éléments impliqués, qui n'est pas fixe dans mon cas.

y a-t-il un moyen d'étendre la div interne à la largeur de l'écran dans une mise en page réactive?

41
demandé sur Mad Scientist 2015-07-13 22:07:07

5 réponses

vous pouvez définir la largeur en fonction de la vw (largeur viewport). Vous pouvez aussi utiliser cette valeur en utilisant la fonction calc , pour calculer une marge de gauche pour le div. De cette façon, vous pouvez le positionner à l'intérieur de l'écoulement, mais tout de même dépassant sur le côté gauche et à droite de la fixed-width div centrée.

Support est assez bonne. vw est pris en charge par tous les principaux navigateurs, y compris IE9+ . Il en va de même pour calc() . Si vous avez besoin de soutenir IE8 ou Opera Mini, vous n'avez pas de chance avec cette méthode.

- edit -

, Comme mentionné dans les commentaires, lorsque le contenu de la page est plus élevé que l'écran, il en résultera une barre de défilement horizontale. Vous pouvez supprimer ce scrollbar en utilisant body {overflow-x: hidden;} . Il serait bien de le résoudre d'une manière différente, mais une solution utilisant left et right comme présenté dans largeur: 100% sans scrollbars ne fonctionne pas dans cette situation.

div {
  min-height: 40px;
  box-sizing: border-box;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: 2px solid green;
}
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
65
répondu GolezTrol 2018-04-12 14:47:43

après de nombreuses recherches, j'ai trouvé cette solution: créer pleine largeur (100% ) conteneur à l'intérieur de la largeur fixe conteneur . Je pense que c'est la meilleure solution car elle ne dépend d'aucun facteur externe, seule la div que vous souhaitez développer.

<div class="container" style="width: 750px; margin: 0 auto;">
   <div class="row-full">
     --- Full width container ---
   </div>   
</div>

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}
8
répondu crico_aven 2016-10-17 15:25:49

typiquement l'élément responsive, bootstrap ou fondation, vous permet d'ajouter un élément "row". Vous pouvez placer le" Wide-div "à l'extérieur d'un élément avec" row " et il devrait s'étendre pour prendre la pleine largeur.

alternativement, vous pouvez utiliser le positionnement absolu pour cet élément qui ignore la plupart des paramètres hérités:

.wide-div {
    position: absolute;
    left: 0;
    right: 0;
}
5
répondu Organiccat 2015-07-13 19:10:39

vous pouvez utiliser vw. Démo http://jsfiddle.net/fsLhm6pk /

.parent {
    width:200px;
    height:200px; 
    background:red;
}
.child {
    width:100vw;
    height: 50px; 
    background:yellow;
}

vous avez raison, cela ne fonctionne pas avec centrée div, essayez plutôt ceci

EDIT http://jsfiddle.net/fsLhm6pk/1 /

.parent {
width:200px;
height:200px; 
background:red;
margin:0 auto;
}
.child {
width:100%;
left:0; right:0;
position:absolute;
height: 50px; 
background:yellow;
}
2
répondu aahhaa 2015-07-13 19:15:19

Vous pouvez désormais le faire

.full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

ou ce

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

plus de détails: https://css-tricks.com/full-width-containers-limited-width-parents/

1
répondu Aximili 2017-12-07 02:11:23