CSS:性能明智,最好使用calc或position绝对值

Question

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

现在我有两个选择:

#up{
    height: 50px;
}

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

要么:

#up{
    height: 50px;
}

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

如果我的窗口中有很多这样的情况,哪一个最适合使用性能？

这个小提琴

PS.我不关心旧的浏览器支持.

Answer 1

我总是会选择calc选项。两者看起来可能相同，但事实并非如此。

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

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

例如，如果您想在下面添加另一个容器#down（可能是页脚），那么在您的第一个选项中，它将重叠放置#down在页眉正下方的容器中。在第二个选项中，它将放置在您想要的位置。