垂直扩展DIV以填充非固定高度列中的剩余空间 [英] Expand DIV vertically to fill the remaining space in nonfixed height column

问题描述

我具有以下DIV结构：

I have the following DIVs structure:

<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，一个在另一个下面。宽度都是固定的。

DIV d2 is the left column (float: left), while d3 is on the right (float: right). d4 and d5 all go into right column d3, one below the other. The widths are all fixed.

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

DIVs d4 has fixed height of 300px. The content of div d2 has dynamic height but it is at least 300px high. My goal is to make DIV d5's height to fill the remaining space in the right column (d3) so that the total height of this column is equal to the dynamic height of the left column (d2).

我想要一个纯CSS解决方案，没有JS。

I would like a pure CSS solution, no JS.

这是我正在使用的CSS：

This is the CSS I am using:

#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;
}

推荐答案

您可以使用display：tale ;和表格单元格；

You can use display: tale; and table-cell; with a heightof 100% on d5.

#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/

这篇关于垂直扩展DIV以填充非固定高度列中的剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！