0

私は次のhtmlを持っています:

<div class="left">
    <div style="margin: 32px 0;">
        <div class="border"></div>
    </div>
</div>

そしてCSS：

.left {
    position:absolute;
    background: red;
    height: 50%;
    width: 32px;
}
.border {
    background: green;
    height: 100%;
}

しかし、緑色のボックスが表示されません:(

UPD: 緑のボックスの上と下に赤い四角を表示したいです。
UPD2: 緑色のボックスの高さは red.height - 32px*2 にする必要があります

4

3 に答える 3

2

あなたの問題は、ここに 3 つの空の div があり、そのうちの 1 つに高さが設定されていないことです。そのmin-height: 100%ため、外側のコンテナに表示されていない高さがなければ、機能しません。そこにコンテンツを配置するか、3 つの div の 1 つ (ページ上の唯一のコンテナーであると仮定) に実際の高さを与える必要があります。のように.left{ height: #px; }(# = 必要な高さ)。そうしないと、ブラウザにはパーセンテージを関連付けるものがないため、パーセンテージをレンダリングする方法がわかりません。

div はブロック レベルの要素です。つまり、div に配置されたコンテンツのサイズを想定しますが、コンテンツが含まれていない場合は、0px x 0px の高さを想定します。

http://jsfiddle.net/X6qkL/5/更新

于 2012-05-19T08:24:17.693 に答える
2

2 番目の div には高さが割り当てられていないため、最も内側の div に相対的な高さを割り当てることはできません。次の CSS ルールを追加してみてください。

.left div {
    height: 100%;
}

または、内側の div に明示的な高さを割り当てます。

http://jsfiddle.net/B9z92/1/

于 2012-05-19T08:28:03.047 に答える
0

で使用min-height: 100%;し.border{...}ます。クラスを追加してdivの親に .middle { height: 100%; }割り当てます。div.border{...}

于 2012-05-19T08:20:08.213 に答える