Firefox中的CSS高度100％不起作用答案

【问题标题】：CSS height 100% in firefox not workingFirefox中的CSS高度100％不起作用
【发布时间】：2014-01-24 05:31:52
【问题描述】：

我有以下 HTML 和 CSS，它们在 Firefox 和 Chrome 中的行为完全不同。

.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 将被堆叠而不是内联。

【问题讨论】：

将 display:inline-table 更改为 display:inline-block 让它在我的两个浏览器中都能正常工作。

标签： html css

【解决方案1】：

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

我只有在使用时才能让它工作

.content {
    display: inline-table;
 }

【讨论】：

【解决方案2】：

该元素无法正确显示，因为 FireFox 将其锁定为内部内容的大小，但我确定您已经收集到了。

我注意到容纳内部元素的容器高度固定为 50。如果外部容器的高度固定，则可以匹配内部元素的高度。

我知道这不是基于百分比的动态解决方案，但它是一种变通方法。

【讨论】：

【解决方案3】：

尝试将display: inline-table; 更改为display: inline-block;。

【讨论】：

【解决方案4】：

试试它的工作原理

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

【讨论】：

为什么，在哪里？请具体。
这指的是 .container 元素，对我有用。这里的技巧是省略高度声明并使用 top:0 和 bottom:0 代替。