Div填充高度

我遇到問題。從代碼中可以看到，在名爲「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>

來源

2012-11-13 user1784025

有以包括圖形張貼此作爲一個答案。在Firefox和Chrome和IE中，你的頁面看起來像我認爲你已經描述過的： enter image description here

這是它應該如何顯示的？

來源

2012-11-13 22:59:49

隨着一點點的欺騙這是可以做到：
文本右細胞是高：http://jsfiddle.net/UQgXM/2/
文本在左邊的單元格就越高：http://jsfiddle.net/UQgXM/3/

我已經從HTML分離的CSS。重大變化：

給定表的高度。這是使單元格中的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; 
}

來源

2012-11-13 23:17:14 GolezTrol

這在Chrome中效果很好，但在IE中不起作用。任何想法如何使這個工作也在IE瀏覽器？ – user1784025

無法在IE中使用它。顯然很多人都有同樣的問題，但我找不到解決方案。 – GolezTrol

隨着一點點的JavaScript，你可以做一些數學和計算高度粉色格應是。

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

來源

2012-11-13 23:22:35

回答

相關問題