html - 可滚动列表不适合容器

Question

我正在尝试制作一个具有固定高度(由 JS 定义)的边栏，并在其中放置一个 div 横幅和一个可滚动列表。

问题是我希望滚动条只出现在列表中，我不能使用 CSS calc()(不支持 IE8)。

这是小部件的示例，您可以清楚地看到问题。
该列表针对与横幅相同的高度。

.sidebar {
  height: 300px;
  width: 200px;
  outline: 1px solid red;
}

.banner {
  background: purple;
  height: 50px;  
}

.list {
  margin: 0;
  overflow-y: scroll;
  height: 100%;
}

http://codepen.io/FezVrasta/pen/tfgHx

如何在不使用 JS 的情况下解决这个问题？

Answer 1

只需将固定的 max-height 分配给列表即可，因为您知道其他值:

.list {
  margin: 0;
  overflow-y: scroll;
  max-height: 250px;
}

演示 http://codepen.io/anon/pen/yetrd

编辑

对于侧边栏的动态高度但知道横幅的高度，您可以做的是使用以下属性伪造横幅的空间:

.list {
  box-sizing:border-box;
  position:relative;
  margin: 0;
  border-top:50px solid transparent;
  top:-50px;  
  overflow-y: scroll;
  height: 100%;
}

在列表中将横幅空间伪造为 border 和 negative top，您始终确保该空间。很明显 box-sizing:border-box 支持 IE8 检查兼容性 here

和新演示 http://codepen.io/anon/pen/DbFel