simPod simPod - 3 months ago 10
CSS Question

Scrollable div inside container without known height

I'm trying to scroll items within a container without known height. I have div

itemsHolder
which fills up the rest of
wrapper
container.
wrapper
container can have any height but contains
header
container which has fixed height. So I don't know the height of
itemsHolder
and I need div
items
to be scrollable. Here's the code I tried but was unsuccessful.

To sum up. There's
wrapper
container containing
header
and
itemsHolder
.
wrapper
has variable height,
header
has fixed height and
itemsHolder
fills the rest of
wrapper
(
wrapper.height - header.height = itemsHolder.height
). I need div
items
to be scrollable within
itemsHolder
without using JS.

Thanks.

<div class="wrapper">
<div class="header">
title
</div>
<div class="itemsHolder">
<div class="items">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>


CSS:

.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
overflow: scroll;
}
.item {
width: 100px;
height: 80px;
float: left;
}


http://jsfiddle.net/B2XUL/

Update: I don't know the size of
wrapper
, it may be different each time and therefore I don't know the height of
itemsHolder
so I can't set it fixed.

Answer

Do the following:

.wrapper {
    background: #ccc;
    height: 200px;   
    width: 100px;
}

.itemsHolder {
    height: 100%;
    overflow: auto;
    overflow-x:hidden;
    background: #ccc;
}

Demo

Comments