Question

我有以下DIV结构：

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

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

DIV d2是左列（float：left），而d3是右边（float：right）。 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

你可以使用display：tale;和表格单元格;在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 border-right 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%;
}

垂直展开DIV以填充非固定高度列中的剩余空间

2 个答案: