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％の高さにしたいのですが、高さを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多分それはあなたのために役立つでしょう-新しいマイクロクリアフィックスハック

于 2012-10-16T20:01:49.223 に答える
0

私はあまりよく分からない。しかし、container（catbg0）にオーバーフローを与える：hidden; 動作する可能性があります。通常、これは適用されるdivをストレッチします（特定の高さが設定されていない場合）。

注：それはまだオーバーフロー、長​​い単語などであり、オーバーフローがdivをマスクするため、divはそのまま続行されます。

于 2012-10-16T17:41:38.630 に答える