Leere DIV 100% ausstrecken und Höhe davon erhalten

Question

Ich habe einige HTML-Vorlage, es hat zwei Divs links und rechts schweben. Einer von ihnen ist höher (ich weiß nicht welcher, weil es nur Vorlage ist). Unter diesen DIVs befindet sich also ein freier Speicherplatz. Ich habe dort leere DIVs hinzugefügt (free-div-1 und free-div-2) und möchte, dass sie sich um freie Höhe strecken.

Warum brauche ich das? Ich möchte die Größe des freien Speicherplatzes wissen, um sie mit etwas Inhalt mit Ajax zu füllen. Aber ich bekomme immer Nullhöhe dieser Blöcke.

Natürlich kann ich diesen Raum als Differenz zwischen den linken und rechten DIVs berechnen. Aber meine Frage betrifft das automatische Ausstrecken leerer Divs, ist das möglich?

Danke.

CSS:

.first { 
    width: 200px; 
    float: left; 
    background:aqua; 
} 
.second { 
    width: 150px; 
    float: right; 
    background:yellow; 
} 
.container { 
    width: 400px; 
    background: #ccc; 
} 
/* Without text trick the container will be of 0px height */ 
.container:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.free-block-1, .free-block.2 {  
    background: red; 
} 

HTML:

<div class="container"> 
    <div class="first"> 
    <div class="first-content"> 
     <p>First content block. Can have any height.</p> 
     <p>First content block. Can have any height.</p> 
     <p>First content block. Can have any height.</p> 
     <p>First content block. Can have any height.</p> 
     <p>First content block. Can have any height.</p> 
     <p>First content block. Can have any height.</p> 
     <p>First content block. Can have any height.</p> 
    </div> 
    <div class="free-block-1"></div> 
    </div> 
    <div class="second"> 
    <div class="first-content"> 
     <p>Second content block. Can have any height.</p> 
     <p>Second content block. Can have any height.</p> 
     <p>Second content block. Can have any height.</p> 
     <p>Second content block. Can have any height.</p>  
    </div> 
    <div class="free-block-2"></div> 
    </div> 
</div> 

Reales Beispiel: http://jsbin.com/edubar/4/edit

Answer 1

Wörtlich beantwortet gerade diese Frage hier: Vertically align to a dynamic height from another div?

Grundsätzlich verwenden Sie das Tischmodell statt Das Boxmodell von CSS. Dann wirkt es wie ein Tisch und die Zellen erstrecken sich über die gesamte Höhe des Tisches.

Hier ist die aktualisierte bin: http://jsbin.com/edubar/5/edit

Answer 2

Hallo Sie genauso wie

Ihre CSS-Datei ändern

.first { 
    width: 200px; 
    background:aqua; 
    display:table-cell; 
} 
.second { 
    background:yellow; 
    display:table-cell; 
} 
.container { 
    width: 400px; 
    background: #ccc; 
} 
/* Without text trick the container will be of 0px height */ 
.container:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.free-block-1, .free-block-2 {  
    background: red; 

} 

now link is here please check to it

http://jsfiddle.net/H3Z9z/