CSS - Faites de l'héritage de Div une hauteur

Question

J'essaie de faire une boîte avec des coins arrondis où la hauteur et la largeur de la div dépendent du contenu, donc il s'adapte automatiquement ...

Vous pouvez voir l'exemple ici: http://pastehtml.com/view/1duizyf.html

Le problème est que je ne peux pas obtenir le "test_mid_left" (fond noir) et "test_mid_right" (fond turquoise) pour hériter de la hauteur du "test_mid_center" (fond vert). J'ai essayé la hauteur: 100% et l'auto, mais aucun des travaux. Alors, comment puis-je les faire hériter de la hauteur du contenu?

(La raison pour laquelle j'ai utilisé "min-height: xx" dans le contenu gauche et droit sur l'exemple est juste de montrer de quelles boîtes je parle)

Answer 1

Comme déjà mentionné que cela ne peut pas être fait avec des chars, ils ne peuvent pas hériter de hauteurs, ils ne sont pas au courant de leurs frères et sœurs, donc par exemple les deux flotteurs de côté ne connaissent pas la hauteur du contenu central, donc ils ne peuvent pas hériter de tout.

Habituellement, la hauteur héritée doit provenir d'un élément qui a une hauteur explicite ou si height: 100%; a été transmis à travers l'arbre d'affichage. élément absolument positionné - Vous pouvez donc par exemple positionner absolument tous les côtés et coins supérieurs en bas à droite (vous connaissez la hauteur et la largeur des coins de toute façon) et comme vous semblez connaître les largeurs (des bordures gauche / droite) et les hauteurs du haut / en bas )) Les frontières, et les largeurs des centres supérieurs / inférieurs, sont faciles à 100% - la seule chose qui doit être calculée est la hauteur des côtés droite / gauche si le contenu augmente -

Ce que vous pouvez faire, même sans utiliser les quatre coordonnées de positionnement qui IE6 /7 ne prend pas en charge

J'ai donné un exemple en fonction de ce que vous avez donné, il s'appuie sur une largeur fixe (votre cadre), mais je pense que cela pourrait également fonctionner avec une largeur flexible? Les utilisations de cela pourraient être cool pour ces bordures d'image fantaisistes que nous ne pouvons pas prendre en charge jusqu'à ce que plusieurs images d'arrière-plan ou les bordures d'image ne deviennent pleinement disponibles .. qui sait, je jouais, donc juste le coller là-bas!

Exemple de preuve de concept est ici

Answer 2

Le problème

Lorsqu'un élément est flotté, son parent ne le contient plus car le flotteur est retiré de l'écoulement. L'élément flottant est hors du flux naturel, donc tous les éléments de bloc rendront comme si l'élément flottant n'était même pas là, donc un conteneur parent ne se développera pas complètement pour maintenir l'élément enfant flotté.

Jetez un œil à l'article suivant pour avoir une meilleure idée du fonctionnement de la propriété Float CSS:

Le mystère de la propriété float CSS

---

Une solution potentielle

Maintenant, je pense que l'article suivant ressemble à ce que vous essayez de faire. Jetez un œil à cela et voyez si vous pouvez résoudre votre problème.

Colonnes de hauteur égale avec CSS cross-browser

J'espère que ça aide.

Answer 3

L'astuce de marge négative:

http://pastehtml.com/view/1dujbt3.html

Pas élégant, je suppose, mais cela fonctionne dans certains cas.

Answer 4

Vous devez retirer un flotteur: à gauche; Propriété ... parce que lorsque vous utilisez Float, le parent div ne grub pas la hauteur de ses enfants ... Si vous voulez que la plongée parent obtienne la hauteur des enfants, vous devez donner au parent div a CSS Propriété déborde: Hidden; Mais pour résoudre votre problème, vous pouvez utiliser l'affichage: cellule de table; Au lieu de flotter ... il mettra automatiquement la hauteur de la div à la hauteur de son parent ...