Javascript CSS：性能方面，最好使用calc或position absolute

我有一个固定高度的集装箱舱。在两个div内，顶部高度：50px，另一个必须填充空白，但允许内部滚动

现在我有两个选择：

#up{
    height: 50px;
}

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

或：

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

---

另外，我不在乎旧的浏览器支持

我会一直使用

calc

选项。两者看起来可能相同，但事实并非如此

当您使用

position:absolute

时，您将容器

#down

从html流中取出

这意味着，如果任何时候你想在你的项目中添加更多的东西，你在定位它们时会遇到很多问题

---

例如，如果您想在

#down

下方添加另一个容器（可能是页脚），则在第一个选项中，它将重叠放置在页眉正下方的

#down

容器上。在第二个选项中，它将被放置在您想要的位置。

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

flexbox

.container{
显示器：flex；
弯曲方向：立柱；
高度：200px；
}
#向上{
背景：黄色；
flex:050px；
}
#向下{
背景：橙色；
flex:1自动；
}

向上的
向下
第一，既然你在比较，也考虑使用翻译，你的两个例子没有相同的行为。我加了一个fiddle@kiwi1342是的，您必须将css更改为绝对定位的css，因为它的行为与另一个不一样…@kiwi1342此外，在代码中
#down1
之后添加的任何html内容都将直接定位在
.up
的下方（即隐藏在
#down1
后面），而
#down2
之后的内容将位于其下方。）这对反应能力也很糟糕
#up{
    height: 50px;
}

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