DIV在表格單元格中不可見時的高度設置爲100％

Question

我試圖在HTML表格單元格中放置一個紅色的矩形圖標，後面跟着一些文本，這裏出現了很奇怪的行爲。我使用的只是一個DIV繪製紅色矩形，如示例中所示。我想矩形的高度是單元格的高度，所以我設置高度：100％

https://jsfiddle.net/pm43k26w/1/

<table border="1"> 
    <td> 
     <div style="width:10px;height:100%;background:red;display:inline-block"></div> 
     Height in percentage 
    </td> 
    <td> 
     <div style="width:10px;height:10px;background:red;display:inline-block"></div> 
     Fixed Height 
    </td>  
</table> 

解決方案種類在Chrome作品，但不能在Firefox。 FireFox只顯示一個空白區域。它似乎不喜歡它，當我將高度設置爲100％任何人都可以解釋爲什麼？如果DIV不是矩形的正確方法，那麼最好的方法是什麼？

謝謝。

Answer 1

首先，您需要了解這裏的問題。 CSS諸如高度的屬性是「Computed」。在這種特殊情況下，第一個div的計算高度（我們稱之爲unseenForce，我們應該？）爲0，而其堂兄弟，恰當地命名爲seenForce是10px。看到這個如下：

http://jsfiddle.net/gvo4kf41/

$(document).ready(function() { 
 
    $('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />'); 
 
    $('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px')); 
 
});

.Info { 
 
    color: red; 
 
    margin-top : 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table border="1"> 
 
    <td> 
 
     <div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div> 
 
     Height in percentage 
 
    </td> 
 
    <td> 
 
     <div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div> 
 
     Fixed Height 
 
    </td>  
 
</table> 
 

 
<div class="Info"> 
 
    
 
</div>

這是因爲沒有unseenForce的祖先有一個特定的高度給他們。因此，Firefox無法附加height。

你需要做的是強制高度計算值是大於0。有很多方法來做到這一點，所有的答案在這裏告訴你這樣做的不同的方法是什麼。選擇一個適合您需求的產品。

這就是我會這樣做的方式。只需將高度添加到該行（<td>）。

table td { 
 
    height: 10px; 
 
}

<table border="1"> 
 
    <td> 
 
     <div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div> 
 
     Height in percentage 
 
    </td> 
 
    <td> 
 
     <div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div> 
 
     Fixed Height 
 
    </td>  
 
</table> 
 

 
<div class="Info"> 
 
    
 
</div>

希望這有助於！

Answer 2

嘗試設置父元素的高度。

<td style="height:20px"> 

這應該有助於解決Firefox問題。

編輯：的jsfiddle： https://jsfiddle.net/prove64m/

Answer 3

火狐需要在div內容。以下修改將會執行。數字實體是Unicode的「零寬度空間字符」。當然，非破壞性空間（ ）也可以。

<div style="width:10px;height:100%;background:red;display:inline-block">&#8203;</div> 

請參閱this fiddle。

Answer 4

首先你忘了<tr>標籤。 所以這應該是正確的HTML：

<table> 
    <tr> 
     <td> 
      <div></div> first text 
     </td> 
     <td> 
      <div></div> second text 
     </td> 
    </tr> 
</table> 

然後CSS部分：

table { 
    border:1px solid; 
} 
td { 
    height:40px; 
} 
div { 
    display:inline-block; 
    vertical-align:bottom; 
    width:10px; 
    height:100%; 
    background:red 
} 

講究的高度總是被判斷，所以，如果沒有任何可明確設定，有沒有「計算」;我們是這樣做的：

td { 
    height:40px; 
} 

其他重要的事情;我想你想控制<div>元素後面的文字位置;這是可能以這種方式與在線塊元素：

div { 
    ... 
    vertical-align:bottom; 
    ... 
} 

其他可能的值是：中，上，...

這裏的小提琴：https://jsfiddle.net/pm43k26w/5/