Bir konteyner div'ini, çocukların toplam yüksekliğine nasıl yeniden boyutlandırabilirim?

Question

İçeriği değiştikçe yeniden boyutlandırmam gereken bir kapsayıcı elem var. Hem yüksekliği değiştirebilen 2 kesinlikle konumlandırılmış div içerir. Konteynerin yüksekliğini belirtmezsem, konteynırdan sonra herhangi bir şey içeriğin altında kaybolur. Şu anda

Aşağıdaki yapıyorum ama daha az zahmetli bir alternatif bulmak için memnun olurum:

(konteyner konuma sahiptir: # içeriği mutlak: akrabası #main ve #Sidebar pozisyon vardır kenar belirtilen herhangi bir konumlandırma) sahip

cSS:

div#mapcontainer { position:relative; width:100%; height: 600px; } 
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; } 
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;} 

html:

<div id="container"> 
    <div id="main">variable height content here</div> 
    <div id="sidebar"> 
     <div id="foo">...</div> 
     <div id="bar">....</div> 
     ... 
    </div> 
<div> 

js: div yüksekliği her zaman çocukların yüksekliğinde olduğu gibi

fixHeights = function() { 
    var children_height = 0; 
    $('#sidebar'). children().each(function(){children_height += $(this).height();}); 
    $('#container').height(Math.max(children_height, $('#main').height())); 
}; 

Answer 1

Bu, çok garip bir sorudur.

Kapsayıcınızdaki içerikler kayar mı? Çocuk içeriği yüzdüğünüzde, içeren div artık aynı şekilde davranmaz.

<div style="clear:both;"></div> 

çocuk yüzer izin vermez: That konteyner div altındaki geçmiş uzanan içeriği yüzen ediyorsanız

, konteyner div çocukların en altına aşağıdaki div ekleyin bunun üzerine, böylece ...

<div id="container"> 
    <div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div> 
    <div id="static" style="margin-left:104px;">Lots of static stuff here</div> 
    <div style="clear:both;"></div> 
</div> 

---

Tamam onun en uzun çocuğun yükseklik olması içeren div zorlayarak, seni olduğun gibi konumlandırma neden yaptığını emin değilim ama ziyaretinde Bir masaüstü uygulaması gibi görünmesi gereken bir web sitesi için benzer bir şey yaptık. Bunu javascript ile yapmanın başka bir yolu olduğuna inanmıyorum. Html belgeleri akıtacak, sert olmayacak şekilde tasarlanmıştır. Eğer javascript üzerinde kefalet etmek isterseniz, konumlandırma stillerini bırakmanız ve yüzen ve takas divlarınızı kullanmanız gerekir. Onun değil ... korkunç o

Answer 2

Eğer kapsayıcı div yüzen eğer "taşma: auto" da başkasıyla bütün IE hasLayout fiyaskosu ile ilgili olarak, sihirli çalışabilir

Answer 3

Sen belirtmedi

ama Kayan elemanlarla ilgili bir problem yaşıyorsunuz ve kapların en azından yüzen yüzeyin büyüklüğünde olmasını istiyorsunuz. Ayrıca, yüzer elemanların büyüklüğüne muhafaza elemanının boyutunu rerender için tarayıcı zorlar aşağıdaki CSS hack denemelisiniz: Bu çalışırsa

#wrapper:after { 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
} 

Beni ile gelip bilmesini sağlayın ve. Tarayıcınıza bağlı olarak denemek için başka birçok hack var.

Answer 4

Mutlak konumlandırmayı kullanmamaya css'yi değiştirmeyi deneyebilirim. Firefox'ta, mapcontainer'ı doğru yüksekliğe çıkarmak için yorumlarda yer alan sarmalayıcı hilesini kullanmanız gerekir.

div # mapcontainer {clear: both two; en: 100%; min-yükseklik: 600 pks; }

div # main {float: left; kenar boşluğu: 10px; genişlik: 500px; yükseklik: 400px; }

div # sidebar {float: left; kenar üstü: 10px; margin-right: 10px; genişlik: 155px; yükseklik: 405px;}

Answer 5

Overflow:visible; Bu bilet. Gerekiyorsa overflow:auto bir kaydırma çubuğu oluşturacaktır.