jQuery .height() taşma ile div üzerinde .scrollHeight ile aynı değeri çıktı: auto (IE8)

Question

Diğer birçok soruyu yönlendirdikten sonra, sorunu gideren bir yanıt bulamadım.

Divanın taşıp taşmadığını öğrenmek için bir komut dosyası yazıyorum. Ancak görünür yüksekliği jQuery.height(), jQuery.innerHeight() veya JavaScripts offsetHeight ile almaya çalışırken. Tüm div (taşan kısmı da dahil olmak üzere) değerini verdim, yani: scrollHeight ile aynı değer.

içeren DIV'leri stili: Ben jsFiddle üzerine senaryo kadar bir taklidini oluşturduk

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

: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/

Answer 1

Everything (kaydırma çubuğu oluşturmak için önizleme ekranı küçültmek için emin olun) iyi görünüyor, jQuery.height() ve jQuery.innerHeight() taşma özelliği ile ilgisi yoktur. Sadece görünen kısmı değil, yükseklikleri geri döndürecekler.

İçerik yüksekliğini öğrenmek istiyorsanız, scrollHeight numaralı telefonu kullanmalısınız. Bu scrollHeight jQuery

document.getElementById("wrapper").scrollHeight; 

kullanmak gerekmez Yoksa çalışma jsfiddle bakın jQuery seçimi

kullanabilirsiniz düzenli javascript özelliktir: http://jsfiddle.net/scgz7an5/1/

Bildirim o

$('#wrapper').scrollHeight; 

undefined değerini döndürür.

GÜNCELLEME Sen yüzen elementlerin en önemli bölümünü unuttum. Onları temizlemeyi unuttun.

Bu jsfiddle'a bir göz atın, sizin düzenlediğiniz bir düzenlemedir, ancak yüzer öğeler temizlenir. Orada scrollHeight ve jQuery.height() için farklı değerler görüyorsunuz. .structureContent'un .content değil, .width100 numaralı kaydırma çubuğuna sahip olduğunu görün.

.structureContentoverflow:auto'a sahiptir ve gördüğünüz kaydırma çubuğu bundan gelir.

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

Ben senin yüzen elemanları temizlemek için bu sınıf ekledi.

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

çıktı şuydu:

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

unsurları yüzen ve onları burada temizleme hakkında büyük bir makalesine bakın: I do not rağmen, http://css-tricks.com/all-about-floats/

Answer 2

Ben artık sorun için bir çözüm buldum Bunu neden yaptığını tam olarak anlayın.

Bu yazdım ve ben sadece kaydırma çubuğu görünüp görünmediğini anlamak için bir düzeltme yazıyordum HTML ve kodu değil. Ama konteynerin ebeveyni ScrollHeight ve Height'ın almamın problemimi çözdüğünü buldum. ScrollHeight'ın yükseklikten büyük olup olmadığını görmek, sorunu çözmeme izin verdi.

Answer 3

Gördüğünüz kaydırma çubuğu .content aslında .structureContent elemana ve değildir. Bu nedenle .content tüm aynı değeri döndürür. .content kesilmiyor.