html - div 高度在 firefox 的浏览器窗口中不完全 100%，但在 chrome、ie 和 safari 中效果很好

Question

我在浏览器窗口 100% 高度的 div 上搜索了这个非常烦人的问题。在 StackOverflow 和其他论坛上阅读了大约 15 篇文章，但没有一篇提供解决方案。左侧的灰色条应 100% 垂直于浏览器窗口，而不是 div 内容。

我尝试了 min-height:100%, display:block, cell, table, table-cell, inline-block 等等。只是无法让它工作。它最烦人的部分是:它在一开始就起作用了。显然我及时修改了代码，但发现问题太晚了，所以我不知道什么有效。

可能是问题的类是:

主容器

.导航.内容

有人可以帮助尝试/更正代码吗？我在这里拔头发;)

有问题的页面是 https://www.paybrick.com/example.php 死链接

提前致谢!

Answer 1

使用:

#maincontainer {
  display: table;
  height: 100%;
  min-height: 100%; /* try to give value in px instead of percent */
}