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中，您的页面看起来就像我认为您已经描述过的那样： enter image description here

这是怎么出现的？

Answer 2

通过一点点诡计，可以做到这一点：
右侧单元格中的文字较高：http://jsfiddle.net/UQgXM/2/
左侧单元格中的文字较高：http://jsfiddle.net/UQgXM/3/

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

鉴于桌子的高度。这需要使单元格中的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，你可以做一些数学运算并计算粉红色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。请注意，此代码应放在doc。中的这些div之后的js标记中。

Div填充可用高度

3 个答案: