web-dev-qa-db-fra.com

Comment puis-je étendre une div enfant à une largeur d’écran de 100% si la div en conteneur est plus petite?

L'élément parent de toute la page est un div centré limité à une largeur maximale de 960px. Tous les autres éléments de la page sont des enfants de cette division 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 dépasser une largeur de 960px, le div que j'ai appelé "wide-div" devrait remplir toute la largeur de l'écran. Il contient une seule image plus large que le 960px et doit définir une couleur d'arrière-plan différente pour toute la largeur de l'écran.

Je ne peux pas facilement retirer cette division de la division parente, cela gâcherait d'autres parties de ma mise en page et rendrait le tout plutôt gênant.

J'ai trouvé quelques astuces pour y parvenir, mais aucune ne semblait correspondre à mes besoins. Mon design est réactif, ou du moins j'essaie d'y parvenir. Les astuces que j'ai trouvées reposaient sur la connaissance de la taille des éléments impliqués, ce qui n'est pas résolu dans mon cas.

Existe-t-il un moyen d'étendre la division interne à la largeur de l'écran dans une présentation réactive?

cssresponsive-design
56
Mad Scientist

Vous pouvez définir la largeur en fonction de la largeur de fenêtre (vw). Vous pouvez aussi utiliser cette valeur en utilisant la fonction calc pour calculer une marge gauche pour la div. De cette façon, vous pouvez le positionner à l'intérieur du flux, tout en dépassant les côtés gauche et droit du div de largeur fixe centré.

Le support est très bon. vw is supporté par tous les principaux navigateurs, y compris IE9 + . Il en va de même pour calc() . Si vous avez besoin de supporter IE8 ou Opera Mini, vous n’avez pas de chance avec cette méthode.

-modifier-

Comme mentionné dans les commentaires, lorsque le contenu de la page est plus élevé que l'écran, il en résulte une barre de défilement horizontale. Vous pouvez supprimer cette barre de défilement en utilisant body {overflow-x: hidden;}. Ce serait bien de le résoudre différemment, mais une solution utilisant left et right sera présentée dans largeur: 100% sans barres de défilement 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>
85
GolezTrol

Après de nombreuses recherches, j'ai trouvé cette solution: Création d'un conteneur pleine largeur (100%) à l'intérieur d'un conteneur de largeur fixe . Je pense que c'est la meilleure solution car elle ne dépend d'aucun facteur externe, mais uniquement de la division 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%;
}
10
crico_aven

Généralement, l'élément responsive, bootstrap ou Foundation, vous permet d'ajouter un élément "row". Vous pouvez placer le "wide-div" en dehors d'un élément avec "row" et il devrait être développé de manière à prendre sur toute la largeur.

Vous pouvez également 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;
}
6
Organiccat

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

.parent {
  width: 200px;
  height: 200px;
  background: red;
}

.child {
  width: 100vw;
  height: 50px;
  background: yellow;
}
<div class='parent'>
  <div class='child'></div>
</div>

Vous avez raison, cela ne fonctionnera pas avec div centré. Essayez ceci à la place:

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;
}
<div class='parent'>
  <div class='child'></div>
</div>
2
aahhaa

Vous pouvez maintenant faire ça

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

ou ca

.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/

2
Aximili

Je suis un peu surpris que personne ne propose ce qui suit au cours des 4 dernières années. Le css position:fixed property extrait l'élément et le redimensionne par rapport à la fenêtre. Dans certains cas, cela ne fonctionne peut-être pas, mais si vous utilisez une boîte de dialogue modale ou quelque chose du genre, cela fonctionne bien.

.wide-div{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%; // in case you need to cover the height as well
    background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
    z-index:1; // you may need to adjust the index of your other elements as well
}
0
Altimus Prime