在firefox中不工作的CSS高度100％

Question

我有以下HTML和CSS在Firefox和Chrome中表現完全不同。

JSFiddle。

.container { 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    display: inline-table; 
 
} 
 

 
.content { 
 
    background-color: red; 
 
    width: 30%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="content"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="content"></div> 
 
</div>

在Chrome中正確顯示的，但不能在Firefox。

鉻：

火狐：

通過在Firefox檢查內容DIV，高度爲0

它爲什麼會在Chrome和Safari的工作，但不在Firefox？ 我注意到刪除display: inline-table將工作，但容器div將堆疊，而不是內聯。

Answer 1

嘗試更改display: inline-table;至display: inline-block;。

Answer 2

http://jsfiddle.net/yAa3y/12/

我只能得到它，當我用

.content { 
    display: inline-table; 
} 

Answer 3

，因爲Firefox是鎖定到內部內容的大小的元素不顯示正常工作，但我敢肯定你已經收集到了。

我注意到容納內部的容器高度固定爲50.如果外部容器的高度固定，則可以匹配內部元素的高度。

我知道這不是基於百分比的動態解決方案，但它是一種解決方法。

Answer 4

嘗試此其工作

position: absolute; 
top: 0px; 
bottom: 0px; 
width: 50px;