web-dev-qa-db-fra.com

Pouvez-vous faire un div enfant plus grand que le parent sans position absolue

Donc, fondamentalement, ce que je veux faire, c'est avoir une div ou deux sur une page qui est plus grande que sa div. Normalement, je restructurerais tout le site Web, mais ce serait une grosse tâche.

La raison pour laquelle je ne veux pas qu'ils soient en position absolue est que les hauteurs du conteneur vont alors être gâchées et que les positions absolues chevaucheront certaines div.

La raison pour laquelle les deux divs sont plus grands que leurs divs parents est qu'ils doivent correspondre à la largeur du navigateur lorsque les divs de conteneur ne peuvent pas dépasser 1200px.

htmlcsscss3css-position
13
Rambomst

Oui!

De plus, nous pouvons faire mieux en utilisant vw et calc.

Définissez simplement la largeur des éléments enfants sur 100% de la largeur de la fenêtre en utilisant vw (unités en pourcentage), puis définissez leur marge gauche sur une valeur calculée négative en fonction de cette valeur, moins la largeur de l'encapsuleur. À part le max-width facultatif du parent, tout le reste est calculé automatiquement. Vous pouvez modifier dynamiquement la largeur du conteneur parent. Les enfants seront automatiquement redimensionnés et alignés selon les besoins, sans être positionnés.

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 {
  width: 100vw;/* <-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left Edge to the left Edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left Edge of the viewport */
  height: 50px;
  background: yellow;
}
<div class='parent'>
  parent element
  <div class='child'>child element</div>
</div>

35
SW4

Vous pouvez également utiliser des marges pour y parvenir: http://jsfiddle.net/MEc7p/1/

div{
outline: 2px solid red;
}
#outer{
width: 200px;
height: 400px;
}
#inner{
width: 600px;
height: 200px;
margin: 0 -20px;
outline: 1px solid green;
}
1
Pat Dobson

Essayez ce violon 

http://jsfiddle.net/stanze/g2SLk/

.wrapper {
    width: 400px;
    border: 1px solid #f00;
    min-height: 153px;
}
.wrapper-child-1 {
    float: left;
    border: 1px solid #ccc;
    width: 195%;
    min-height: 262px;
}

<div class="wrapper">
  <div class="wrapper-child-1"> </div>
</div>
0
stanze