Div填充可用高度

Question

我有个问题。 从代码中可以看到，在名为“ div1”的div中，我有3个div。 我希望第一（黄色）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/

我将CSS和HTML分开了。 主要变化：

• 给桌子一个高度。 这是使单元格中的div响应高度设置所必需的。 桌子高度被忽略。 我将其设置为1％，但表要更大。
• 给定粉红色的div高度为100％，并留有边距和填充以正确定位内容。

• 给定黄色div（尤其是顶部的div），其z索引为1，并且位置为：相对于使其响应z索引。 否则它将落后于粉红色的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，您可以做一些数学运算并计算出粉红色div的高度。

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。 请注意，此代码应放在文档中这些div之后的js标记中。