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標記中。