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;