css - divの高さ制限

Question

jsfiddle - ご覧のとおり、すべての div の高さはピクセル (div aおよびdiv b). . 最後の 1 つ (div c) はheight:100%. （黄色divはオーバーフローしています）。

Answer 1

デモ

bdivも含めて本体と同じ高さです。負のマージンとパディングで修正します。

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#a{background:red; height:300px;}
#b{background:blue; height:50px; position:relative; z-index:15;}
#c{background:yellow; height:100%; margin-top:-50px; padding-top: 50px;width:100px; position:relative; z-index:5;}​

Answer 2

ピクセルにコーディングしているため、 #c{height:250px;} を設定したくない理由はありますか? つまり、Div C の高さを Div A の高さと Div B の高さの差にしますか? これにより、黄色の div が常に赤色の div と同じ高さで終了するようになります。

#a{background:red; height:300px;}
#b{background:blue; height:50px;}
#c{background:yellow; height:250px; width:100px;}​

Answer 3

div#b {
    float: left;
    width: 100%;
}

これはトリックを行います

http://www.jsfiddle.net/KWZdD/30/

Answer 4

div c をブロック a 内に置き、b を取り出す -

<div id="b"></div>
<div id="a">
     <div id="c"></div>
</div>

Answer 5

これを試してみてください。div a が親であり、高さが 300px であるため、 b と c の合計は 300px になるはずです

 #a{background:red; height:300px;}
 #b{background:blue; height:50px;}
 #c{background:yellow; height:250px; width:100px;}