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

修改

对于侧边栏的动态高度，但了解横幅的height您可以做的是伪造具有此属性的横幅空间：

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

将列表空间伪装成列表上的border和negative top，确保始终保证该空间。在IE8上支持box-sizing:border-box，并检查兼容性here

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

Answer 2

banner类是父类，sidebar类是子类，因此它不能过度流动它的父类。也许你可以这样做，我不太确定你的项目是怎样的。但试试吧。

.sidebar {
  height: 300px;
  width: 200px;
  outline: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
}

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

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

可滚动列表不适合容器

2 个答案: