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;