浮動div無絕對位置的動態父母的100％身高？

Question

我已經在這裏做了很多的閱讀，並且找不到解答我的答案。

我有一個容器div，有多個浮動的左divs，根據下面的html。

<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> 

我的問題是.catbg0不具有特定高度，.catb2的內容把它推到它的高度，並作爲內容可以改變我不能設置一個特定的高度。我想讓.catb類的其餘部分達到.catbg0類的100％高度，但設置高度爲100％;不起作用。

下面是與上述相關的CSS。

.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;} 

任何想法？謝謝。

Answer 1

因爲我知道只有塊位置：絕對可能是100％身高和它的孩子。

如果您確信.catb2具有.catb的最大高度*嘗試添加包裝：

<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 */ } 

附：也許它會對你有用 - A new micro clearfix hack

Answer 2

我不太確定。但給容器（catbg0）溢出：隱藏;可能工作。通常，它所做的是擴展它應用於的div（未設置特定高度時）。

注意：它仍然是一個溢出，長詞等等和divs將繼續進行，因爲溢出掩蓋div。