2013-10-19 32 views
10

Die inner1 und inner2 divs sind innerhalb des äußeren div, noch die Höhe des Außen zeigt als 0px mit height: autoCSS height: auto nicht funktioniert

wie die Höhe des Kind-Element für den äußeren div zu bekommen?

Code

<style> 
#outer { 
    width:300px; 
    height:auto;; 
    background:#ccc;  
} 
#inner1 { 
    float:left; 
    width:100px; 
    height:100px; 
    background:#f00; 
} 
#inner2 { 
    float:left; 
    width:100px; 
    height:100px; 
    background:#0f0; 
} 
</style> 
<div id="outer"> 
    <div id="inner1"></div> 
    <div id="inner2"></div> 
</div> 
+0

Auch einen Blick auf [dieser] (http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) –

+0

Set 100% statt Auto –

+1

Soweit die Lösung geht, hier ist die Antwort - http://jsfiddle.net/k8Zmc/ –

Antwort

7

Float der äußere div. Das wird deine ganze Höhe abdecken, egal wie hoch die inneren Höhen sind. Aber wenn Sie Ihre innere div float-Eigenschaft bereitstellen. Ich werde Ihnen dann vorschlagen, den Hack clearfix zu verwenden ..

/* Assuming this HTML structure: 

    <div class="clear"> 
     <div class="floated"></div> 
     <div class="floated"></div> 
     <div class="floated"></div> 
    </div> 
*/ 

.clear:before, .clear:after { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 
} 

.clear:after { 
    clear: both; 
} 

dies versuchen Sie es sicher

mit id outer
28

hinzufügen overflow:auto zum div arbeiten. Dies wird dein Problem lösen.

Demo

+0

Große Antwort! Genau das, wonach ich gesucht habe. –