div填充可用高度答案

【问题标题】：Div filling available heightdiv填充可用高度
【发布时间】：2012-11-02 10:40:36
【问题描述】：

我有问题。从代码中可以看出，在名为“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>

【问题讨论】：

标签： css html height vertical-alignment

【解决方案1】：

必须将此作为答案发布才能包含图形。在 Firefox、Chrome 和 IE 中，您的页面看起来就像我认为您所描述的那样：

这是应该的样子吗？

【讨论】：

【解决方案2】：

用一点技巧就可以做到这一点：
右侧单元格中的文本更高：http://jsfiddle.net/UQgXM/2/
左侧单元格中的文本更高：http://jsfiddle.net/UQgXM/3/

我已将 CSS 与 HTML 分开。主要变化：

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

给定黄色 div（尤其是顶部 div）的 z-index 为 1 和 position: relative 以使其响应 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;
}

【讨论】：

这在 Chrome 中效果很好，但在 IE 中不起作用。知道如何让它在 IE 中也能正常工作吗？
无法在 IE 中运行。显然很多人有同样的问题，但我找不到解决方案。

【解决方案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标签中。

【讨论】：