在Firefox中浏览器窗口的div高度不完全100％，但在chrome中效果很好，即＆amp;苹果浏览器

Question

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

我尝试了min-height：100％，显示：块，单元格，表格，表格单元格，内联块等。 只是无法让它发挥作用。最讨厌的部分是：它在一开始就有效。 显然我及时更改了代码，但是看到问题太晚了，所以我不知道什么有用。

可能是问题的类是：

mainContainer上

的.navigation 。内容

有人可以通过尝试/更正代码来帮助吗？ 我把头发拉出来了;）

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

提前谢谢！

Answer 1

display: table和min-height: 100%上#maincontainer元素的组合不起作用。

如果从中移除display: table，则min-height: 100%正常工作且高度正确（但其中的布局不起作用，因为它使用了表格。）

如果您使用height: 100%代替min-height: 100%它可以正常工作，但当窗口高度较小时，这可能对您不起作用。

因此，如果您想使用min-height来设置高度，那么它就不能放在桌子上。

Answer 2

使用：

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

Answer 3

我摆脱了容器中的display:table和display:table-cell以及.content中的.nav。我将其替换为display:inline-block和.content中的.nav。然后我将position:absolute用于.nav，并为padding-left:215px设置.content。这给了一个侧边栏，占据了整个高度，但我不确定它是否是你想做的工作。由你决定。祝你好运！