jQuery .height() wypisuje tę samą wartość co .scrollHeight na div z przepełnieniem: auto (IE8)

Question

Po przekierowaniu na wiele innych pytań nie znalazłem odpowiedzi, która rozwiązuje mój problem.

Piszę skrypt, aby dowiedzieć się, czy div jest przepełniony. Ale gdy próbuje uzyskać widoczną wysokość z jQuery.height(), jQuery.innerHeight() lub . Otrzymałem wartość całego div (włączając część, która jest przepełniona), tj. Taką samą wartość jak scrollHeight.

Zawierający DIV style:

{ 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 73%; 
    bottom: 0px; 
    float: left; 
    height: 100%; 
    top: 0px; 
} 

Utworzyłem mock up scenariusza na jsFiddle: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ (Upewnij się, aby ekran podglądu mniejszy, aby utworzyć pasek przewijania)

Answer 1

Wszystko Wydaje się być w porządku, jQuery.height() i jQuery.innerHeight() nie ma nic wspólnego z właściwością przepełnienia. Zwrócą wysokość, a nie tylko widoczną część.

Jeśli chcesz poznać wysokość treści, musisz użyć scrollHeight. Ten scrollHeight jest regularne właściwość javascript nie trzeba używać jQuery

document.getElementById("wrapper").scrollHeight; 

Albo można użyć selektora jQuery

Zobacz jsfiddle pracy: http://jsfiddle.net/scgz7an5/1/

Zauważ, że

$('#wrapper').scrollHeight; 

zwraca niezdefiniowane.

UPDATE

Zapomniałaś najważniejszą część elementów pływających. Zapomniałeś je wyczyścić.

Spójrz na to jsfiddle, jest to twoja edycja, ale z usuniętymi elementami pływającymi. Widać tam różne wartości dla scrollHeight i jQuery.height(). Zobacz, że .structureContent to ten, który ma pasek przewijania, a nie .content ani .width100.

.structureContent ma overflow:auto, a pasek przewijania, który widzisz, pochodzi od niego.

http://jsfiddle.net/L2bxmszv/5/

dodałem tej klasy wyczyścić elementy pływające.

.clearfix:before, 
.clearfix:after, { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; } 
.clearfix:after { 
    clear: both; } 
.clearfix { 
    zoom: 1; } 

Wyjście było to:

.content 
324 for scrollHeight 
324 for clientHeight 
324 for jQuery.height() 
.structureContent 
324 for scrollHeight 
276 for clientHeight 
276 for jQuery.height() 

Zobacz wielki artykuł o pływających elementów i usuwając je tutaj: http://css-tricks.com/all-about-floats/

Answer 2

Mam teraz znaleźć rozwiązanie mojego problemu, chociaż nie w pełni zrozumieć, dlaczego to robi.

To nie jest kod HTML i kod, który napisałem, a ja po prostu pisałem poprawkę, aby zobaczyć, czy pasek przewijania się pojawi. Ale okazało się, że uzyskanie ScrollHeight i Wysokość nadrzędnego kontenera rozwiązało mój problem. Porównywanie i sprawdzanie, czy scrollHeight jest większa niż wysokość, pozwoliło mi rozwiązać problem.

Answer 3

Pasek przewijania, który widzisz, znajduje się na elemencie .structureContent, a nie na .content. Dlatego .content zwraca tę samą wartość. .content nie jest obcięty.