Div填充高度

Question

我遇到问题。从代码中可以看到，在名为“div1”的div中，我有3个div。我希望第一个（黄色）div位于顶部，第三个（黄色）位于底部，第二个div（粉色）填充剩余空间。唯一固定的高度是黄色div的高度。你能帮我吗，如何让粉红色的div填补余下的空间？这里是我的代码：

<div style="width:100%;background-color: lime;display: table;border-collapse: collapse;"> 
<div style="display: table-row;"> 
    <div id=div1 style="display: table-cell;background-color: #0f0;"> 

     <div style="background-color:yellow;width:100%;height:20px;">s</div> 
     <div style="background-color:pink; width:100%;"> 
      Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa  
     </div> 
     <div style="background-color:yellow;width:100%;height:20px;">s</div> 
    </div> 
    <div style="background-color: #f00;display: table-cell;width:250px"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum 
    </div> 
</div> 

Answer 1

有以包括图形张贴此作为一个答案。在Firefox和Chrome和IE中，你的页面看起来像我认为你已经描述过的：

这是它应该如何显示的？

Answer 2

随着一点点的欺骗这是可以做到：
文本右细胞是高：http://jsfiddle.net/UQgXM/2/
文本在左边的单元格就越高：http://jsfiddle.net/UQgXM/3/

我已经从HTML分离的CSS。 重大变化：

• 给定表的高度。这是使单元格中的div响应高度设置所必需的。表格高度被忽略。我将它设置为1％，但表格希望变大。
• 给定粉红色div为100％的高度以及用于定位内容的边距和填充。

• 给定黄色div（特别是最上面的那个）z-index为1和position：相对于它的z-index作出响应。否则它会落后于粉红色的div。

  <div class="top">s</div> 
      <div class="middle"> 
       Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa d sad dsa Lorem dsadsad dsa  
      </div> 
      <div class="bottom">s</div> 
  </div> 
  <div class="rightcell"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum 
  </div> 
  

而CSS：

.table { 
    width:100%; 
    height: 1%; 
    background-color: lime; 
    display: table; 
    border-collapse: collapse; 
} 

.row { 
    display: table-row; 
} 
#div1 { 
    display: table-cell; 
    background-color: #0f0; 
} 
.top, 
.bottom{ 
    background-color:yellow; 
    width:100%; 
    height:20px; 
    z-index: 1; 
    position: relative; 
} 
.middle { 
    background-color:pink; 
    width:100%; 
    height: 100%; 
    margin: -20px 0; 
    position: relative; 
    padding: 20px 0; 
} 
.rightcell { 
    background-color: #f00; 
    display: table-cell; 
    width:250px; 
} 
​ 

Answer 3

随着一点点的JavaScript，你可以做一些数学和计算高度粉色格应是。

var rightD = document.getElementById('rightDiv'); 
var yellowD = document.getElementById('yellowD'); 
var middleD = document.getElementById('middleDiv'); 
var height = rightD.clientHeight - (yellowD.clientHeight * 2); 

middleD.style.height = height + 'px'; 

http://jsfiddle.net/kX4UB/1/

你不需要申报这么多的变数，但我也只是为了便于显示。我只是将高度设置为红色div的高度减去黄色div的高度x2。请注意，此代码应放置在doc中的这些div之后的js标记中。