Wie wird die Größe eines Container-DIVs auf die Gesamthöhe seiner untergeordneten Elemente geändert?

Question

Ich habe ein Container-Element, das ich ändern muss, wenn der Inhalt ändert. Es enthält 2 absolut positionierte Divs, die beide die Höhe ändern können. Wenn ich nicht die Höhe des Containers angeben, dann verschwindet alles nach dem Container unter dem Inhalt.

Im Moment habe ich folgendes tue, aber ich würde gerne eine weniger mühsame Alternative zu finden:

(Behälter position: relative, #main und #sidebar ist position: absolute, wird der Inhalt von # Sidebar haben keine Positionierung angegeben)

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:

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

Answer 1

Dies ist eine sehr seltsame Frage, wie div Höhe immer die Höhe seiner Kinder ist.

Floating Content in Ihrem Container div? Wenn Sie untergeordneten Inhalt floaten, verhält sich das enthaltene div nicht mehr gleich.

Wenn Sie Inhalte sind schwebend, die vorbei an den Boden des Behälters div erstreckt, fügen Sie bis auf den Grund der Kinder des Behälters div folgendes div:

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

Das wird keine Kinder erlauben zu schweben so über sie, die enthält div zwingt die Höhe seines höchsten Kind zu sein ...

<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> 

---

okay, ich bin nicht sicher, warum Sie die Positionierung der Art und Weise tust du bist, aber ich hab ' etwas ähnliches für eine Website getan, die wie eine Desktop-Anwendung aussehen musste. Ich glaube nicht, dass es irgendeinen Weg gibt, dies anders als mit Javascript zu tun. HTML-Dokumente sind so konzipiert, dass sie fließen, nicht starr sein müssen. Wenn Sie JavaScript aktivieren möchten, müssen Sie die Positionierungsstile loslassen und Ihre Floating- und Clearing-Divs verwenden. Es ist nicht dass schrecklich ...

Answer 2

wenn Sie den Container div sind schwimmend „overflow: auto“ kann auch im Hinblick auf die gesamte IE hasLayout Debakel

Answer 3

Sie geben nicht auf magische Weise, esp arbeiten, aber Ich denke, Sie haben ein Problem mit schwebenden Elementen und möchten, dass der Container, in dem sie sich befinden, mindestens die Größe des größten schwebenden Elements hat. Sie sollten die folgende CSS-Hack versuchen, die den Browser zwingt die Größe des Containerelements auf die Größe der schwebenden Elemente rerender:

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

Lassen Sie mich wissen, was Sie kommen mit, und wenn das funktioniert. Es gibt viele andere Hacks zu versuchen, abhängig von Ihrem Browser.

Answer 4

Ich würde versuchen, die css nicht absolute Positionierung verwenden. In Firefox müssten Sie die Wrapper-Trick-Erwähnung in den Kommentaren verwenden, um den Mapcontainer auf die richtige Höhe zu bringen.

div # mapcontainer {klar: beide; Breite: 100%; Min-Höhe: 600px; }

div # main {float: left; Rand links: 10px; Breite: 500px; Höhe: 400px; }

div # Seitenleiste {float: left; Rand oben: 10px; Rand rechts: 10px; Breite: 155px; Höhe: 405px;}

Answer 5

Overflow:visible; Das ist das Ticket. overflow:auto erstellt bei Bedarf eine Bildlaufleiste.