7

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

根据下面的 html，我有一个容器 div，有多个浮动的左 div。

<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% 高度，但设置 height: 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;}

有任何想法吗？谢谢。

4

2 回答 2

2

据我所知，只有带有 position:absolute 的块可能是 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 也许对你有用 -一个新的 micro clearfix hack

于 2012-10-16T20:01:49.223 回答
0

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

注意：它仍然是溢出、长词等，并且 div 将继续运行，因为溢出掩盖了 div。

于 2012-10-16T17:41:38.630 回答