css - 停止图像溢出容器 div

Question

我创建了一个页面，右侧有固定宽度的列，其中包含缩略图，大图像显示在左侧。我目前使用 Javascript 函数将 #thumbcontainer div 的高度限制为窗口的大小，以便 #thumbcolumn div 可以在缩略图数量的范围内滚动超过窗口的高度。

但是，我认为必须有一种方法可以使用 CSS 来完成此操作。问题在于 #thumbcolumn 中包含的图像不会固定在窗口的高度并滚动 - 相反，它们会扩展到超出窗口的高度，因此必须向下滚动整个窗口。

代码如下:

<div class="imgcntnr">
   <div id="displayimages">
      <span style="white-space: nowrap;" id="imageset">various images</span>
   </div>

   <div id="thumbcontainer">
        <div id="thumbcolumn"></div>
   </div>
</div>

这是 CSS:

.imgcntnr {
  padding: 10px 100px 0 0;
  overflow: hidden;
  height: 100%
}

#displayimages,
#thumbcolumn {
  float: left;
  position: relative;
}

#displayimages {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
}

#thumbcontainer {
  height: auto;
}

#thumbcolumn {
  width: 100px;
  height: 100%;
  overflow: auto;
  margin: 0 auto;
  margin-right: -100px;
}

.thumbimages {
  display: block;
  margin: 0 auto 5px;
}

如有任何帮助，我们将不胜感激。

Answer 1

你能用类似的东西吗

.thumbnailcontainer
{
    position: fixed;
    top: 0;
    bottom: 0;
    right:0;
    width: 200px;
    overflow-y: auto;
}

理论上，这应该为您提供一个从上到下横跨窗口的容器，并在图像列表变大时滚动。

编辑:示例:http://jsfiddle.net/QgY3L/