CSS：在性能方面，使用calc还是绝对定位更好？

Question

我有一个固定高度的容器 div。里面有两个 div，顶部高度为 50px，另一个必须填充剩余空间但允许内部滚动。

现在我有两个选项：

#up{
    height: 50px;
}

#down{
    position: absolute;
    top: 50px;
    bottom: 0;
}

或者：

#up{
    height: 50px;
}

#down{
    height: calc(100% - 50px);
}

如果我在窗口中有许多这些案例，哪一个在性能方面最好使用？

此Fiddle

附注：我不关心旧浏览器的支持。

- kiwi1342

---

由于您正在进行比较，请考虑使用“translate”作为第一个选项。 - maioman

你的两个例子行为不同。 - Mr Lister

@MrLister 你是什么意思？我添加了一个fiddle。 - kiwi1342

@kiwi1342 是的，你必须更改绝对定位的CSS，因为它的行为与其他元素不同... - Mr Lister

@kiwi1342 另外，代码中在 #down1 之后添加的任何 HTML 内容都将直接放置在 .up 下方（即隐藏在 #down1 后面），而在 #down2 之后的内容将放置在其下方。 (新的 fiddle) - Mr Lister

在性能方面，实际上没有什么显著的区别（毕竟这是 CSS），但使用 calc 肯定比使用 position:absolute 并打破 HTML 的流程更好。 - jogoe

Answer 1

我将始终使用“calc”选项。虽然两者看起来相同，但实际上它们是不同的。 当您使用“position:absolute”时，您正在将容器“#down”移出HTML流程。 这意味着，如果您随时要向项目添加更多内容，则会遇到许多定位问题。 例如，如果您想在“#down”下方添加另一个容器（例如页脚），则在第一种选项中，它将被放置在您的标题正下方与“#down”容器重叠。在第二个选项中，它将被放置在您想要的位置。

- Alvaro Menéndez

---

它也不利于响应性。 :) - jogoe

Answer 2

填充空间的一种方法是使用 flexbox。

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
}

#up {
  background: yellow;
  flex: 0 0 50px;
}

#down {
  background: orange;
  flex: 1 1 auto;
}

<div class="container">
  <div id="up">
    up
  </div>
  <div id="down">
    down
  </div>
</div>

- Veiko Jääger