Question

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

但是，我认为必须有一种方法可以使用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

尝试在overflow: scroll;上设置#thumbcolumn。

Answer 2

你能用

之类的东西吗？

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

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

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

停止图像溢出容器div

2 个答案: