Div Floated 100% altezza del genitore dinamico senza posizione assoluta?

Question

Ho letto molto qui e non riesco a trovare una soluzione alla mia risposta.

Ho un contenitore div, con più immersioni a virgola mobile, come da html qui sotto.

<div class="catbg0" id="b1"> 

    <div class="catb1">#</div> 
    <div class="catb2">Board Name</div> 
    <div class="catb3">Topics</div> 
    <div class="catb4">Posts</div> 
    <div class="catb5">Last Post</div> 
    <div class="clearboth"></div> 

</div> 

mio problema è che .catbg0 non hai una determinata altezza, il contenuto di .catb2 spinge verso il basso per la sua altezza, e come il contenuto può variare smusso impostare una determinata altezza. Voglio che il resto delle classi .catb raggiunga il 100% dell'altezza della classe .catbg0, ma imposta l'altezza: 100%; non funziona.

Di seguito è riportato il CSS che si riferisce a quanto sopra.

.catb1 {float: left; width: 9%; height: 100%; min-height: 100%;} 
.catb2 {float: left; width: 52%; height: 100%; min-height: 100%;} 
.catb3 {float: left; width: 8%; height: 100%; min-height: 100%;} 
.catb4 {float: left; width: 8%; height: 100%; min-height: 100%;} 
.catb5 {float: left; width: 23%; height: 100%; min-height: 100%;} 
.clearboth {clear: both; height:0; width: 0; margin: 0; padding: 0;} 

Qualche idea? Grazie.

Answer 1

Come so solo blocco con posizione: l'altezza assoluta può essere al 100% e anche i bambini.

Se sei sicuro che .catb2 ha la più grande altezza del .catb * provare ad aggiungere involucro:

<div class="catbg0" id="b1"> 

    <div class="catb2">Board Name</div> 

    <div class="wrapper"> 
     <div class="catb1">#</div> 
     <!-- margin == catb2 width --> 
     <div class="catb3">Topics</div> 
     <div class="catb4">Posts</div> 
     <div class="catb5">Last Post</div> 
    </div> 

    <div class="clearboth"></div> 

</div> 

CSS

.catbg0 { position: relative; } 
.wrapper { position: absolute; width: 100%; height: 100%; } 
.catb2 { margin-left: /* catb1 width here */ } 

P.S. Forse sarà utile per voi - A new micro clearfix hack

Answer 2

Non ne sono del tutto sicuro. Ma dare al contenitore (catbg0) un overflow: nascosto; potrebbe funzionare Di solito ciò che fa è allungare il div a cui è applicato (quando non è impostata un'altezza specifica).

Nota: è sempre un overflow, parole lunghe ecc. E le div continueranno solo dal momento che l'overflow maschera il div.