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

Question

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

htmlcsscss-position

3

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

如果侧边栏比内容更长，则需要将内容元素拉伸到与侧边栏相同的高度，以使内容背景占据大部分屏幕空间，从而保持设计的整洁性。

通过让容器具有"display: table"属性，以及给两个子元素添加"display: table-cell"属性来优美地解决了此问题。这将使它们并排放置，并确保它们始终具有相同的高度。

但是，现在我想在内容中放置两个较小的导航栏。其中一个固定在窗格顶部，另一个固定在底部。我使用"position: relative"来设置内容，并使用"position: absolute"来设置导航栏。

这个解决方案在现代浏览器上完美工作，但 Firefox 31之前的版本不接受表格单元格元素(table-cell)上的"position: relative"，因此便会出现导航栏相对于文档主体位置的问题。

我能否在所有常见的浏览器上使此解决方案起作用？我需要保持内容元素随侧边栏的拉伸。

链接:

一个简化的代码示例:

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>

- ividyon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- klasske · Answer 1

根据此答案：https://dev59.com/lG435IYBdhLWcg3w50f4#8312358，解决这个问题的唯一方法是在显示为表格单元格的元素周围添加一个带有相对位置的<div>，就像在这个fiddlehttp://jsfiddle.net/qp7vhtk8/6/中一样。

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

div {
   position: relative;
}