CSS: Comment la hauteur des éléments de bloc est-elle calculée?

Question

J'utilise un élément div contenant des commentaires. J'utilise essentiellement jQuery pour ajouter d'autres commentaires comme ceci:

$(myDiv).append(
'<li>' 
+ '<img width="32px" height="32px" src="mySource"/></a>' 
+ '<p>' + myComment + '</p>' 
+ '</li>' 
); 

Le problème est qu'il semble que la hauteur de l'ensemble div ne marche pas correctement mis à jour se! La hauteur du div augmente alors que j'ajoute plus de commentaires, mais pas assez, donc après quelques commentaires il a tendance à déborder.

Comment la hauteur d'un élément est-elle réellement calculée?

Answer 1

En ce qui concerne la question générale de « Comment est la hauteur d'un élément calculé », quelques informations sont disponibles ici: http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

Comme vous pouvez le voir, il est un peu compliqué.

Quelques extraits:

éléments de niveau bloc non remplacés dans un flux normal lorsque « overflow » calcule à « visible »

Cette section applique également aux éléments de niveau bloc non remplacés dans flux normal lorsque 'overflow' ne se calcule pas en 'visible' mais a été propagé à la fenêtre.

[. . .]

Si « height » est « auto », la hauteur dépend si l'élément a des enfants au niveau des blocs et si elle a un rembourrage ou les frontières:

Si elle ne dispose que des enfants de niveau en ligne, la hauteur est la distance entre le haut de la boîte de ligne la plus haute et le bas de la boîte de ligne la plus basse. S'il a des enfants au niveau du bloc, la hauteur est la distance entre le bord supérieur de la boîte enfant au niveau du bloc le plus haut n'ayant pas de marges et le bord inférieur du bloc inférieur. la boîte enfant de niveau qui n'a pas de marges s'est effondrée à travers elle.

[. . . ]

Seuls les enfants dans le flux normal sont pris en compte (c'est-à-dire, les boîtes flottantes et les boîtes positionnées de manière absolue sont ignorées, et les boîtes relativement positionnées sont considérées sans leur décalage).

[. . . ]

Éléments non remplacés au niveau du bloc dans le flux normal lorsque 'overflow' ne se calcule pas en 'visible' (sauf si la valeur de la propriété 'overflow' a été propagée à la fenêtre).

Si 'height' est 'auto', the height depends on the element's descendants.

Answer 2

Est-ce que cela se produit dans tous les navigateurs ou juste un? Les calculs de hauteur diffèrent subtilement entre les navigateurs.

La première chose que je regarde quand la page n'est pas rendue comme je le devrais est de savoir si le HTML est valide. Dans votre code, vous avez une étiquette de fermeture </a> sans aucune ouverture. Ce type de discordance est suffisant pour désactiver plusieurs navigateurs.

Il m'est arrivé à plusieurs reprises où les boutons de navigation semblent être dans un endroit très différent tout parce que quelque part dans mon contenu j'ai oublié de fermer un <div> ou j'ai ajouté un élément de fermeture quelque part.

Answer 3

Vous ajoutez un DIV ou un UL? Il devrait être un UL

Essayez cette CSS