javascript inhalt Wie skaliere ich ein Container-Div auf die Gesamthöhe seiner Kinder?




jquery div höhe automatisch anpassen (4)

Ich habe ein Containerelement, das ich ändern muss, wenn sich sein 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 mache ich folgendes, aber ich würde mich freuen, eine weniger mühsame Alternative zu finden:

(container hat position: relative, #main und # sidebar sind position: absolute, der Inhalt von #sidebar hat 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()));
};

Das ist eine sehr merkwürdige Frage, da divs Höhe immer die Höhe seiner Kinder ist.

Schwebst du Inhalte in deinem Container div? Wenn Sie untergeordneten Inhalt floaten, verhält sich das enthaltene div nicht mehr gleich.

Wenn Sie Inhalt schweben lassen, der über das Ende des Container-div hinausreicht, fügen Sie das folgende div ganz unten in die untergeordneten Elemente des Container-divs ein:

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

Das erlaubt Kindern nicht, darüber zu schweben, und zwingt so das enthaltene div zur Höhe seines größten Kindes ...

<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 mir nicht sicher, warum Sie die Positionierung so machen, wie Sie sind, aber ich habe 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 so schrecklich ...


Ich würde versuchen, die CSS zu ändern, um keine absolute Positionierung zu 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: beides; Breite: 100%; Min-Höhe: 600px; }

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

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


wenn du schwebst, kann der container div "overflow: auto" auch magisch arbeiten, vor allem was den gesamten IE hasLayout Debakel angeht


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





dom