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;