javascript - CSS:性能方面，最好使用 calc 或 position absolute

Question

我有一个固定高度的容器 div。在两个 div 中，顶部高度:50px，另一个必须填充空白区域但允许内部滚动。

现在我有两个选择:

#up{
    height: 50px;
}

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

或:

#up{
    height: 50px;
}

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

如果我的窗口中有许多这样的案例，那么哪一个是最明智的使用性能？

This Fiddle

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

Answer 1

我总是会使用 calc 选项。两者可能看起来一样，但实际上并非如此。

当您使用 position:absolute 时，您正在将容器 #down 从 html 流中移除。

这意味着如果您要向元素中添加更多内容，您将在定位它们时遇到很多问题。

例如，如果您想在 #down 下方添加另一个容器(可能是页脚)，在您的第一个选项中，它将放置在与 #down 容器右侧重叠的位置在标题下方。在第二个选项中，它将放置在您想要的位置。