taşma: div ve vücut üzerinde gizli, bu html Verilen farklı davranış

:taşma: div ve vücut üzerinde gizli, bu html Verilen farklı davranış

body { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
} 

#a { 
    height: 100px; 
    width: 100px; 
} 

#b { 
    height: 100%; 
    width: 100%; 
}

<body> 
    <div id="a"></div> 
    <div id="b"></div> 
</body>

Ben onun konteyner bloğunun kalan tüm dikey boşluğu doldurmak için #b istiyorum, bu ile başladı

, yani 500px olan ana kapsayıcı bloğunun yüksekliğini alıyor demektir, sorun overflow: hidden; çalışmıyor gibi görünüyor, #b kırpılmış değil. Öte yandan

, ben body ile aynı özelliklere sahip başka bir div ile #a ve #b sarın eğer yukarıda ı istenen sonucu vardır:

<body> 
<div id="wrap"> 
<div id="a"></div> 
<div id="b"></div> 
</div> 
</body>

: Elbette bu html ile

#wrap { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
} 

#a { 
    height: 100px; 
    width: 100px; 
} 

#b { 
    height: 100%; 
    width: 100%; 
}

Sorumu neden div ve body aynı özellikleriyle farklı davranışlara sahip gibi görünüyor? ve sarıcı olmadan aynı etkiyi elde etmek için herhangi bir yolu var mı?

İki jsFiddles oluşturduk soruyu açıklamak için: Aynı özelliklere sahip http://jsfiddle.net/2QWn3/

İki jsFiddles farklı verim: sargı olarak div etiketiyle http://jsfiddle.net/3AMtG/

jsFiddle: sarmalayıcı gibi vücut etiketiyle

jsFiddle Sonuçlar. Neden?

kaynak

2013-03-17 Twissell

ben senin iki hakkında örnekleri arasında herhangi bir fark göremez ve thats belki nokta, ben bir gövde etiketi bir div etiketinden daha basical değere sahiptir ve her tarayıcı vb @Firefox 19.0.2 işlemek için kendi yolu vardır sanırım –

overflow mülkiyet CSS2.1 spec açıklanan HTML'nin html ve body elemanları, özel bazı özel davranışları vardır. Bu özel durumlar, normal koşullarda tüm sayfadaki taşma ayarlarının değiştirilmesini sağlamak için hazırlanmıştır, böylece yazarların sadece html veya body'da ayarlaması gerekir, ancak her ikisi de geçerli değildir. Eğer overflow: hiddenbody için geçerli olduğunda, aslında yerine body ait görünüm etkileyen Bu durumda

, (- hayır kaydırma çubukları önizleme bölmesinde kendisi görünecektir bunu kısaltmak için önizleme bölmesi boyutlandırma da bunu görebilirsiniz). Bu, #a ve #b toplamından daha düşük bir sabit yükseklik verseniz bile, vücudun normalde taşması için #b neden olur. Başka bir deyişle, sanki ilk etapta asla vücudun üzerine koymamışsın gibi. Eğer html üzerinde visible dışında bir overflow ayarlarsanız

olsa da, bu suretle etkilenmemiş body deklarasyonu bırakarak ve aynı şekilde davranmaya izin html yerine body verilen değeri kullanmak viewport'u neden olur sarıcı:

html { 
    overflow: auto; 
} 

body { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
}

jsFiddle preview

kaynak

2013-03-17 15:02:27 BoltClock

gövde ve div bunlardan tamamen farklı var. Günlük çalışmamda, kodumu böyle yapılandırmayı seviyorum.

<div class='xxx-ctn'> 
    <div class='xxx-inner'> 
    <div class='data-wrapper'> 
     [p|ul|ol|h1-h6|article|section]..... 
    </div> 
    </div> 
</div>

Tamam, kurucunu kaçırıyorum, ama bence bu iyi bir kodlama habbit.

kaynak

2013-03-17 15:03:03

Gövde elemanı tarayıcı penceresinde görüntülenen diğer elemanlar genişliği, bu nedenle bulunan ve yükseklik özelliği bunun üzerine uygulanabilir olmadığı içinde ana üst eleman olarak kabul edilmektedir. En iyi uygulamalara göre, ikinci örneğinizde yaptığınız #wrapper gibi bir div kabı oluşturmak daha iyidir.

kaynak

2013-03-17 15:44:05

taşma: div ve vücut üzerinde gizli, bu html Verilen farklı davranış

cevap

İlgili konular