如何在显示器中制作DIV：表格单元填充单元格？

Question

我有一个问题，使用CSS的显示：表格功能。我正在使我的基本大纲工作，但现在我想让两个DIV填满表格单元格中的垂直空间。听起来很容易，但我不知道如何做到这一点。下面是一个例子：

aaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb 
a   a b ccccccccccccccccc b 
a   a b c    c b 
a   a b c    c b 
a   a b c    c b 
a   a b c    c b 
a   a b ccccccccccccccccc b 
a   a b dddddddddddddddddd b 
a   a b d    d b 
a   a b dddddddddddddddddd b 
a   a b      b 
a   a b      b 
aaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb 

DIV a是边栏和编码为显示：表小区 DIV b是身体区域和编码为一个显示：表小区

身体内部的“ b“我有两列DIV的Id和C和D.我想要的是DIV d伸展到DIV b的底部以填充任何剩余的空间。

下面是用内嵌样式的代码只是为了便于阅读：

<div> 
    <div id="a" style='display: table-cell; background-color: red;'>aaaaaa 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     aaaaaa 
    </div> 
    <div id="b" style='display: table-cell; background-color: green;'>bbbbbb 
     <div id="c" style='background-color: pink;'> 
      <br> 
      <br> 
     </div> 
     <div id="d" style='background-color: yellow;'> 
      <br> 
      <br> 
     </div> 
    </div> 
</div> 

Fiddle demo

谁能想到一个很好的实现代码？我似乎无法得到它的工作。

Answer 1

如果你只在视觉效果有兴趣，你可能会感兴趣的人造列：http://www.alistapart.com/articles/fauxcolumns/

这里就是你们的榜样更新为使用的技术（在这种情况下没有必要的图像）：

<div> 
    <div id="a" style='display: table-cell; background-color: red;'>aaaaaa 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     aaaaaa 
    </div> 
    <div id="b" style='display: table-cell; background-color: yellow;'> 
     <span style='background-color: green;'>bbbbbb</span> 
     <div id="c" style='background-color: pink;'> 
      <br> 
      <br> 
     </div> 
     <div id="d"> 
      <br> 
      <br> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/uMSEC/2/

如果你确实想在列的末尾来定位的内容，您仍然可以通过使b relative做到这一点，在定位具有绝对的另一个DIV。