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/

我已经将CSS从HTML中分离出来。主要变化：

• 给了桌子一个高度。这是使单元格中的div响应高度设置所必需的。表格高度将被忽略。我将其设置为1%，但表格想要更大一些。
• 给粉红色的div设置了100%的高度，并添加了边距和填充以将内容放在右边。
• 给黄色div(尤其是顶部的div)设置了z索引1和position: relative，以使其响应z索引。否则它将落在粉色分区后面。

 <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标记中。