Skalierung eines Container-Div mit der enthaltenen divs-Höhe

Question

Ich versuche, ein Div in einem Container-Div zu erhalten, um die Container-Divs-Höhe zu skalieren, wenn das Div im Container größer wird. Wenn die Höhe des Div innerhalb des Containers höher als der Container selbst wird, bewegt es sich nur über den Boden des Containers hinaus. Ich möchte, dass der Container mit dem enthaltenen Div skaliert. Wie mache ich das in CSS?

Answer 1

Sie müssen nur Eigenschaft height percent wie geben:

percent { display:block:height:100%; } as your div stands in html: 

<div class="percent"></div> 

Answer 2

Graham. Was Sie beschreiben, ist das Standardverhalten eines DIV oder eines beliebigen Blockelements. z.B. für das folgende HTML:

<style type="text/css"> 
    dl { margin: 0; padding: 0;} 

    #container { 
     background-color: blue; 
     padding: 5px 5px 5px 5px; 
    } 

    #inner { 
     background-color: red; 
    } 
</style> 
<div id="container"> 
    <div id="inner"> 
     <dl> 
      <dt>Stuff</dt> 
      <dd>Blah blah blah</dd> 
      <dt>Foobar</dt> 
      <dd>Bazquux</dd> 
     </dl> 
    </div> 
</div> 

Sie erhalten die folgende HTML gerendert erhalten:

Basic Div http://c0180871.cdn.cloudfiles.rackspacecloud.com/normal.png

Die Situation, die Sie beschreiben, wenn der Behälter div das innere div nicht enthält erweitern tritt auf, wenn Sie floated das innere Div. Floating bricht definitionsgemäß ein Blockelement aus den Beschränkungen seines enthaltenen Elements heraus. Anwenden von "float: left;" zu Ihrem #inner Elemente gibt die folgenden Möglichkeiten:

alt text http://c0180871.cdn.cloudfiles.rackspacecloud.com/floated.png

Die Lösung ist ein Blockebene-Element an der Unterseite des Behälter div hinzufügen, dass der Floats löscht. Dies führt dazu, dass das umschließende div um dieses neue Block-Level-Element und damit auch um Ihre floated-Elemente gewickelt wird.

z.B.

<style type="text/css"> 
    dl { margin: 0; padding: 0;} 

    #container { 
     background-color: blue; 
     padding: 5px 5px 5px 5px; 
    } 

    #inner { 
     background-color: red; 
     float: left; 
    } 
</style> 
<div id="container"> 
    <div id="inner"> 
     <dl> 
      <dt>Stuff</dt> 
      <dd>Blah blah blah</dd> 
      <dt>Foobar</dt> 
      <dd>Bazquux</dd> 
     </dl> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

Dies gibt die Ausgabe identisch mit dem ersten Bild.

Offensichtlich kann dies eine langweilige Sache sein, um den Boden Ihrer Container divs hinzuzufügen, wenn Sie eine Menge Floaten tun.

Mit CSS2 Sie dies mit einer einfachen Klassendefinition (und ein Hack für IE natürlich) tun können:

<style type="text/css"> 
    dl { margin: 0; padding: 0;} 

    #container { 
     background-color: blue; 
     padding: 5px 5px 5px 5px; 
    } 

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

    * html .clearfix {height: 1%;} 

    #inner { 
     background-color: red; 
     float: left; 
    } 
</style> 
<div id="container" class="clearfix"> 
    <div id="inner"> 
     <dl> 
      <dt>Stuff</dt> 
      <dd>Blah blah blah</dd> 
      <dt>Foobar</dt> 
      <dd>Bazquux</dd> 
     </dl> 
    </div> 
</div> 

Fügen Sie einfach die clearfix Klasse zu jedem Ihrer Container Divs, die schwammen Elemente enthalten. Beachten Sie, dass "* html" der von IE benötigte Hack ist.

Answer 3

einfach

overflow: auto; 

an der äußeren div hinzuzufügen.

Answer 4

Wenn Sie "skalieren", wie in einfach nur erweitern, vielleicht lese ich Ihre Beschreibung als das Container-Div mit einer Höhe von, sagen wir, 500px, und die enthaltenen divs schieben diese mehr heraus, wenn sie zu groß werden. In diesem Fall können Sie vielleicht stattdessen min-height verwenden?

min-height: 500px; 

Wenn Sie meinen, „Skala“, wie er in den Container div 500x500px ist, enthielt das nimmt eine Anfangshöhe von 200px bis die mit mehr Inhalt zu 400px erweitert, die den Behälter div drückt auf 1000x1000px (ähnlich ein-/Vergrößerung), dann könnte das komplizierter sein.