web-dev-qa-db-fra.com

Comment définir le pourcentage de largeur de div par rapport au div parent et non à la fenêtre d'affichage

Voici le code HTML avec lequel je travaille .

<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">
  <div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">
    <div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>
  </div>
</div>

Ce que je voudrais, c’est que la div interne occupe 50% de l’espace réservé à sa div parente (externe). Au lieu de cela, il obtient 50% de l'espace disponible dans la fenêtre d'affichage, ce qui signifie que la taille du navigateur/de la fenêtre rétrécit.

Étant donné que la div externe a min-width de 2000px, Je m'attendrais à ce que la division intérieure soit au moins 1000px large.

htmlcsswidthcss-position
52
sean

Spécification d'une position non statique, par exemple, position: absolute/relative sur un nœud signifie qu'il sera utilisé comme référence pour les éléments positionnés de manière absolue en son sein http://jsfiddle.net/E5eEk/1/

Voir https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts

Nous pouvons changer le contexte de positionnement - l'élément auquel l'élément positionné de manière absolue est positionné par rapport à. Ceci est fait en plaçant le positionnement sur l'un des ancêtres de l'élément.

#outer {
  min-width: 2000px; 
  min-height: 1000px; 
  background: #3e3e3e; 
  position:relative
}

#inner {
  left: 1%; 
  top: 45px; 
  width: 50%; 
  height: auto; 
  position: absolute; 
  z-index: 1;
}

#inner-inner {
  background: #efffef;
  position: absolute; 
  height: 400px; 
  right: 0px; 
  left: 0px;
}
<div id="outer">
  <div id="inner">
    <div id="inner-inner"></div>
  </div>
</div>
58
Juan Mendes

Utilisez position: relative sur l'élément parent.

Notez également que si vous n'aviez ajouté aucun attribut de position à l'un des div, vous n'auriez pas vu ce comportement. Juan explique plus loin.

11
William