展开DIV垂直填补不固定高度列中的剩余空间

Question

我有以下的DIV结构：

<div id="d1"> 
    <div id="d2"> 
    </div> 

    <div id="d3"> 
     <div id="d4"></div> 
     <div id="d5"></div> 
    </div> 
</div> 

DIV d2为左栏（浮动：左），而D3是在右边（浮动：对）。 d4和d5全部进入右列d3，一个在另一个之下。宽度都是固定的。

DIVs d4的固定高度为300px。 div d2的内容​​具有动态高度，但至少高300px。 我的目标是使DIV d5的高度填充右列（d3）中的剩余空间，以使此列的总高度等于左列（d2）的动态高度。

我想纯粹的CSS解决方案，没有JS。

这是我使用的CSS：

#d1 { 
    width: 990px; 
    border: 1px solid black; 
    background-color: pink; 
} 

#d2 { 
    float: left; 
    width: 300px; 
    background-color: yellow; 
} 

#d3 { 
    float: right; 
    width: 690px; 
} 

#d4 { 
    background-color: blue; 
    width: 690px; 
    height: 300px; 
} 

#d5 { 
    background-color: brown; 
    width: 690px; 
} 

Answer 1

您可以使用显示：故事;和表格单元格; d5的高度为100％。

#d1 { 
    width: 990px; 
    border: 1px solid black; 
    background-color: pink; 
    padding: 3px; 
    display: table; 
    height: 10000px; 
} 

#d2 { 
    display: table-cell; 
    width: 300px; 
    background-color: yellow; 
} 

#d3 { 
    display: table-cell; 
    width: 690px; 

} 

#d4 { 
    background-color: blue; 
    width: 690px; 
    height: 300px; 
} 

#d5 { 
    background-color: brown; 
    width: 690px; 
    height: 100%; 
} 

http://jsfiddle.net/nnjse/1/

Answer 2

添加到主块＃D1右边框690px和使用负利润率-690px把右列＃D3过去。边框看起来像右栏的背景。如果＃d2变得更高＃d1的边框会让右边的列填充整个父母高度。 ＃d4和＃d5可以使用具有负边界但垂直方向的相同原理。

#d1{ 
    width:300px; 
    margin:0 auto; 
    border-right:690px solid #a52a2a; 
    background:#ffff00; 
} 
#d2{ 
    width:300px; 
    float:left; 
} 
#d3{ 
    width:690px; 
    float:right; 
    margin-right:-690px; 
    border-top:300px solid #EEE; 
    background:#a52a2a; 
} 
#d4{ 
    height:300px; 
    margin-top:-300px; 
    background:#0000ff; 
} 
#d5{ 
    height:100%; 
}