在Firefox的浏览器窗口中，div高度不是完全100%，但在Chrome，IE和Safari中效果很好

Question

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

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

可能有问题的类有:

<标题> maincontainer h1> .navigation.content

有人可以帮忙尝试/纠正代码吗?我在扯我的头发;)

有问题的页面是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 */
}

Answer 2

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

如果你从它删除display: table, min-height: 100%的工作和高度是正确的(但它里面的布局不工作，因为它使用表)。

如果你使用height: 100%而不是min-height: 100%，它可以工作，但当窗口高度较小时，这可能不适合你。

所以，如果你想用min-height来设置高度，那么它就不能在桌子上

Answer 3

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