html - Scrollable div inside container without known height -

html - Scrollable div inside container without known height -

i'm trying scroll items within container without known height. have div itemsholder fills rest of wrapper container. wrapper container can have height contains header container has fixed height. don't know height of itemsholder , need div items scrollable. here's code tried unsuccessful.

to sum up. there's wrapper container containing header , itemsholder. wrapper has variable height, header has fixed height , itemsholder fills rest of wrapper (wrapper.height - header.height = itemsholder.height). need div items 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: don't know size of wrapper, may different each time , hence don't know height of itemsholder can't set fixed.

do following:

.wrapper { background: #ccc; height: 200px; width: 100px; } .itemsholder { height: 100%; overflow: auto; overflow-x:hidden; background: #ccc; }

demo

html css