Stop images overflowing container div
I have created a page with a fixed width column on the right that contains thumbnail images, and large images are displayed to the left. I currently use a Javascript function to limit the height of the #thumbcontainer
div to the size of the window so that the #thumbcolumn
div can scroll within if the number of thumbnail images exceed the height of the window.
However, I am thinking there must be a way to do this using CSS. The problem is that the images contained in #thumbcolumn
don't stick to the height of the window and scroll - instead they expand beyond the window's height so that the whole window has to be scrolled down.
Here is the code:
<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>
Here is the CSS:
.imgcntnr {
padding: 10px 100px 0 0;
overflow: hidden;
height: 100%
}
#displayimages,
#thumb开发者_如何学编程column {
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;
}
Any help would be appreciated.
Could you use something like
.thumbnailcontainer
{
position: fixed;
top: 0;
bottom: 0;
right:0;
width: 200px;
overflow-y: auto;
}
That should, in theory, give you a container that spans top to bottom of the window and scroll when the image list becomes to big.
EDIT: Example: http://jsfiddle.net/QgY3L/
Try setting overflow: scroll;
on #thumbcolumn
.
精彩评论