问题 Firefox的CSS高度100％无法正常工作

我有以下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>

10666

2018-01-06 18:03

起源

更改显示：要显示的内联表：内联块使我在两种浏览器中都能正常工作。 - ccnokes

答案:

尝试改变 display: inline-table; 至 display: inline-block;。

2018-01-06 18:07

谢谢你，先生 - Jonathan Laliberte

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

我用的时候才能让它工作

.content {
    display: inline-table;
 }

2018-01-06 18:06

尝试这个工作

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

2018-02-18 17:25

为什么，在哪里？请具体说明。 - Nisse Engström

可以帮到你 support.mozilla.org/en-US/questions/759359 - Ganesh Kandu

这引用了.container元素，适用于我。这里的技巧是省略高度声明并使用top：0和bottom：0代替。 - mtness

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

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

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

2018-01-06 18:07

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？