scrollHeight donne une valeur incorrecte lorsque la taille de la propriété est fourni dans le css

J'ai essayé d'obtenir le scrollHeight de mon div et j'en suis bien mais lorsque je ajouter de la hauteur de la propriété dans le css pour la div, j'obtiens une valeur différente.

Il suffit d'exécuter le violon et vous pourrez le voir dans la console de la valeur de scrollheight bien être égale à 268 (qui est égal à la somme des hauteurs de tous les enfants)

mais quand j'ajoute une valeur de hauteur dans le css (dire height:50px;) la sortie vient d'être 252 (la différence est la marge du dernier élément enfant, je pense).

quelqu'un peut s'il vous plaît répondre pourquoi il y a une différence ?

Modifier
Depuis que la question n'était pas claire, j'ai reformulé id. Quand je spécifier la hauteur de la div parent je obtenir le défilement de la Hauteur de 252 pixels, tandis que si je ne spécifie pas la hauteur ou "auto" - je obtenir 268 pixels. Je voulais juste savoir pourquoi les marges de ne pas s'effondrer dans le cas d'une version ultérieure ainsi ? Je ne suis pas inquiet à propos de l'effondrement des marges, mais je veux juste savoir pourquoi le défilement hauteur est différente dans ces deux scénarios ?

La réponse donnée ci-dessous est parfaitement bien. Cependant j'ai aussi eu la bonne scrollHeight à l'aide de javascript (y compris la marge inférieure du dernier enfant)

var h = $(div).height();
$(div).height("auto");
var ch = $(div)[0].scrollHeight;
$(div).height(h);
InformationsquelleAutor vdua | 2012-07-22
  1. 7

    Après re-lecture de votre question, j'ai trouvé que vous demandez quelque chose d'autre. Mais c'est toujours la même réponse que j'ai posté plus tôt.

    La hauteur totale est calculée correctement pour 254px. Lorsque vous réglez la hauteur explicitement qu'est inférieure à cette valeur, le navigateur calcule uniquement 238px. C'est comme votre pense - sans 16px marge sur le fond et se produit en raison de "marge de l'effondrement". La dernière marge est rejetée en raison de cette règle:

    Parent et le premier/dernier enfant

    L'effondrement de la marge se termine à l'extérieur de la mère.

    Donc, pour le fixer, vous pouvez utiliser:

    overflow: hidden;

    Ou vous pouvez utiliser un rembourrage à la place (ce remplissage serait "re-construire" votre marge de comportement, voir ci-dessous pour plus d'explications):

    p {
    padding: 8px;
}
p:first-child, p:last-child {
    padding-top: 16px;
}

    Pour plus d'informations, visitez le MDN: L'effondrement de la marge.

    Edit: C'était ma première réponse, avant que je re-lisez-vous la question. Je vais le laisser ici, dans le cas où quelqu'un a une question similaire, et aussi parce qu'il conduit à la même solution.

    Cela résout: Pourquoi est la hauteur ou la marge de frères et sœurs pas comme prévu?

    Votre hauteur est calculée correctement. Ce que vous êtes confronté à est appelé: marge de l'effondrement.

    Cela signifie que vos marges haut et bas de tous vos <p>-tags sont "fusionnées". Dans votre cas, avec 7 lignes, cela signifie:

    • 18px est la hauteur d'une ligne
    • 16px marges en haut et en bas
    • en haut de la première de l'élément et en bas de la dernière sont présentés comme prévu
    • tous les autres marges sont réduites

    et il en résulte:

      7 * 18px (height)
+ 6 * 16px (margins in-between)
+ 2 * 16px (margin top and bottom)
= 254px (exact the value calculated by the browser)

    Vous pouvez facilement éviter cela en utilisant padding à la place.

    Pour plus d'informations, visitez le MDN: L'effondrement de la marge.

    InformationsquelleAutor insertusernamehere