html - 两个相同高度的元素+绝对定位的 child

Question

我有一个带有侧边栏导航和主要内容 Pane 的网站，包裹在一个容器元素中。内容有自己的背景，而菜单则借用父容器的背景。

在侧边栏比内容长的情况下，我需要内容元素一直向下拉伸(stretch)以覆盖相同的高度，以便内容背景占据屏幕空间的大部分以防止设计看起来傻。

通过给容器 display: table 和两个子元素 display: table-cell 可以很好地工作。这会将它们并排放置，并确保它们的高度始终相同。

但是，现在我想在内容中 有两个较小的导航栏。一个固定在 Pane 的顶部，一个固定在 Pane 的底部。我在内容上使用 position: relative 并在导航栏上使用 position: absolute 来实现这一点。

此解决方案在现代浏览器上完美运行，但 Firefox 31 之前的版本不接受 table-cell 元素上的 position: relative，并且导航栏相对于文档正文。

我能否以某种方式使该解决方案适用于所有常见浏览器？我需要保持内容元素随着侧边栏向下延伸。

链接:

• JSFiddle demonstrating the issue
• Live website suffering the problem

一个简化的代码示例:

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;
}

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

    Content

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

Answer 1

根据这个答案:https://stackoverflow.com/a/8312358/3929902 , 解决这个问题的唯一方法是添加 <div>在显示为表格单元格的元素周围，具有相对位置，就像在这个 fiddle 中一样 http://jsfiddle.net/qp7vhtk8/6/

在您的示例中，这仅意味着添加:

div {
   position: relative;
}