两个相同高度的元素+绝对定位的孩子

Question

我有一个带有侧栏导航的网站和一个主内容窗格，包含在容器元素中。内容具有自己的背景，而菜单借用父容器的背景。

如果侧边栏比内容长，我需要将内容元素一直向下拉伸以覆盖相同的高度，以便内容背景构成屏幕空间的大部分，以防止设计愚蠢的。

通过为容器 display：table 和两个孩子显示：table-cell 提供精美的工作。这会将它们放在一起，并确保它们始终保持相同的高度。

但是，现在我希望在内容中有两个较小的导航栏。一个固定在顶部，一个固定在窗格的底部。我在内容上使用 position：relative ，在导航栏上使用 position：absolute 来实现此目的。

问题：此解决方案适用于现代浏览器，但31版之前的Firefox版本不接受 table-cell 上的位置：relative 元素和导航栏相对于文档正文定位。

问题：我可以以某种方式使此解决方案适用于所有常见浏览器吗？我需要保持内容元素与侧边栏一起向下延伸。

链接：

• 的 JSFiddle demonstrating the issue
• 的 Live website suffering the problem

简化的代码示例：

HTML：

<div>
    <nav>
        Sidebar
    </nav>
    <main>
        <header>
            Top navbar
        </header>

        Content

        <footer>
            Bottom navbar
        </footer>
    </main>
</div>

CSS：

div {
    display: table;
    width: 100%;
}

nav {
    vertical-align: top;
    display: table-cell;
    width: 25%;
}

main {
    display: table-cell;
    position: relative;
}

main header, main footer {
    position: absolute;
}

main header {
    top: 0;
}

main footer {
    bottom: 0;
}

Answer 1

根据这个答案：https://stackoverflow.com/a/8312358/3929902，解决这个问题的唯一方法是在显示为表格单元格的元素周围添加<div>，与位置相对，就像在这个小提琴中{{3} }

在您的示例中，这只意味着添加：

div {
   position: relative;
}