css - 固定コンテナに合うように動的なネストされたdivをストレッチしますか？

Question

HTML

<div class="container">
    <div class="a">dummy content</div>
    <div class="b"></div>
</div>

CSS

.container {
    height: 200px; /* Fixed height */
}

.a {
    height: auto; /* Dynamic height */
}

.b {
    height: 100%; /* I want this to fit inside .container, relative to .a */
}

.aがたとえば100pxの動的な高さを取得する場合、.bを.containerの高さ-100pxにします。純粋なCSSを使用して、これを自動的に実行したいと思います。

私のjsFiddleを参照してください：http：//jsfiddle.net/59MKS/。

私はこれでどんな助けでも大いに感謝します。

Answer 1

float:left;クラスに追加.a

シンプルですが、機能します。

Answer 2

あなたは私が推測するjQueryを使用する必要があります。これが私がやった方法ですhttp://jsfiddle.net/59MKS/4/

var height = $(".container").height() - $(".a").height();

$(".b").css("height", height);

Answer 3

これを試して：

.container {
position: absolute;
background-color: red;
width: 100px;
height: 200px; /* Fixed height */
}

.a {
position: relative;
 background-color: green;
 width: 90px;
 height: auto; /* Dynamic height */
}

.b {   
background-color: blue;
 width: 80px;
   height: 100%; /* I want this to fit inside the red container */
}