Comment faire de la div du pourcentage de la largeur par rapport à la div parent et pas de fenêtre d'affichage

Voici le code HTML que je suis en train de travailler avec.

HTML:

<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 arriver, c'est pour l'intérieur de la div d'occuper 50% de l'espace de son parent div(extérieur). Au lieu de cela, il est obtenir 50% de l'espace disponible pour la fenêtre d'affichage, ce qui signifie que le navigateur/fenêtre d'affichage se rétrécit en taille, en fait.

Étant donné que l'extérieur div a min-width de 2000px, je m'attendrais à l'intérieur de la div au moins 1000px de large.

  • l'intérieur de la div est position: absolute, ce qui signifie qu'il est retiré de la normale de la circulation des documents, et n'est plus (pour la taille/position des calculs) un enfant de #extérieure. Vous voudrez peut-être essayer position: relative
  • Il n'est plus dans le flux de ses parents, mais votre commentaire à propos de n d'être un enfant de #extérieure est trompeuse. La description plus précise, c'est qu'il utilise le premier parent/ancêtre qui est absolument ou relativement positionné pour la taille/position des calculs
InformationsquelleAutor sean | 2012-12-13
  1. 55

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

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

    On peut changer le positionnement du contexte de l'élément dont la position absolue de l'élément est positionné par rapport à. Ceci est fait en mettant le positionnement sur l'un des élément les ancêtres.

    CSS:

    #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;
}

    HTML:

    <div id="outer">
  <div id="inner">
    <div id="inner-inner"></div>
  </div>
</div>

    • Merci pour la réponse et l'explication!!
    • J'étais ici pour cette explication! Merci!
    • Je ne savais pas que sur position: relative et absolute. +1!
    InformationsquelleAutor Juan Mendes
  2. 10

    Utiliser la position: relative sur l'élément parent.

    Notez également que si vous n'aviez pas ajouté des attributs de position à l'une des divs vous n'auriez pas vu ce problème. Juan explique plus loin.

    • Parfois je me sens comme stackoverflow réponses sont comme Le Prix est juste. Une personne qui donne la bonne réponse. La personne suivante donne la réponse avec une explication. La prochaine donne une réponse, une explication, et une démo. Je parie 501, Bob!
    • Je n'ai upvote cette réponse, juste ne pense pas qu'il a fourni suffisamment d'explication. Leur apprendre à pêcher
    • Je ne suis pas se moquer de vous en particulier. C'est juste un drôle d'observation.
    • Merci pour la réponse... ça marche!!!
    InformationsquelleAutor William