hauteur de la boîte dynamique DIV avec la position centrale de l'enfant DIV

je parviens à positionner la div interne avec le code html suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<body> 
<div style="background-color: yellow; width: 100px; height: 100px; 
position: relative;"> 
    <div style="background-color: gray; position: absolute; 
    top: 8px; left: 8px; right: 8px; bottom: 8px"></div> 
</div> 
</body> 
</html>

mais le problème est qu'il s'arrête de fonctionner si je veux que la hauteur de div externe soit dynamique. Enlever la valeur de hauteur cache la div extérieure.

Comment cela pourrait-il être réalisé dans toutes les conditions?

Source

2009-07-02 Gennady Shumakher

Qu'essayez-vous réellement d'accomplir? Centrer verticalement la DIV interne quelle que soit la hauteur de la DIV externe? –

Sans contenu à l'intérieur du div externe, il s'effondrera sur lui-même. Avez-vous du contenu à l'intérieur de la div interne? – peirix

oui le div intérieur a du contenu à l'intérieur –

La largeur «W» est-elle connue? Ah, c'est un peu hors de propos ...

OK, vous devez faire quelque chose comme ça (en supposant que vous placez la div extérieure où vous le voulez). :

<div style="float:left; background-color:yellow; width:100px;"> 
    <div style="background-color:gray; margin:8px;">You need enough content here to push the width out far enough...</div> 
</div>

Vous devrez peut-être placer la div à l'extérieur dans un autre div extérieur pour obtenir le positionnement correct, mais le div extérieur doit avoir une variable flottante (gauche ou droite - n'a pas d'importance).

Vous pouvez ajouter des bordures et des remplissages, etc., à ces divs. La clé de tout le processus est la valeur flottante existant dans la div externe.

Source

2009-07-03 08:10:30

Vous ne savez pas vraiment où vous allez avec ça. Mais il semble que vous voulez juste avoir rembourrage autour de la div interne?

<div style="background-color: yellow; width: 100px; 
      position: relative; padding: 8px"> 
<div style="background-color: gray;">Hello</div>

De cette façon, le contenu de la div intérieure modifiera la hauteur de la div externe ...

Source

2009-07-02 11:30:42 peirix

Dans ce cas, vous pouvez avoir seulement 1 div dynamique. –

Cette solution est ok, mais le rembourrage étend la largeur de la div donc afin d'avoir une largeur de 100px, celle-ci devrait mettre en largeur: 84px; rembourrage: 8px. –

Si vous avez seul objet de position absolue [s] dans l'objet de la position relative, vous devez fixer la hauteur valeur de l'objet Position relative.

Indice. Vous pouvez modifier la valeur de hauteur via javascript ou définir la propriété min-height (CSS 2+) de l'objet de position relative.

Source

2009-07-02 11:43:55

hauteur de la boîte dynamique DIV avec la position centrale de l'enfant DIV

Répondre

Questions connexes