Question

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

现在我有两个选择：

#up{
    height: 50px;
}

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

或：

#up{
    height: 50px;
}

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

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

This Fiddle

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

Answer 1

我总是使用calc选项。两者看起来都一样，但事实并非如此。

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

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

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

Answer 2

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

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
}

#up {
  background: yellow;
  flex: 0 0 50px;
}

#down {
  background: orange;
  flex: 1 1 auto;
}

＆＃13;

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

＆＃13;

CSS：性能明智，最好使用calc或position absolute

2 个答案: