浮动div 100％的动态父级高度没有绝对位置？

Question

我在这里做了很多阅读，但找不到我答案的解决方案。

我有一个容器div，有多个浮动的左div，按照下面的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 */  }

PS也许它对你有用 - 一个新的微清晰黑客

Answer 2

我不太确定。 但是给容器（catbg0）一个溢出：隐藏; 可以工作。 通常这样做是拉伸它所应用的div（当没有设置特定高度时）。

注意：它仍然是溢出，长字等。由于溢出掩盖了div，div将继续运行。