View Full Version : How can I create a div with max-height and overflow auto?

11-23-2011, 01:48 PM

See example at: http://jsfiddle.net/woomla/HRQzb/5/

I have a div that I programmatically fill with items (rendered as div's). When the div reaches the bottom of it's parent div, it must stop growing and starts overflowing with a scrollbar. This is what's happening in the fiddle example.

My problem is that divitems has a fixed max-height. I want this max-height to be relative to it's parent bottom. Can I do this with CSS only?

The problem is that I don't know the height of DivB and I do not want DivC to have a fixed height!

I hope someone can help me out because I'm really stuck with this for a long time.

11-23-2011, 11:03 PM
I want this max-height to be relative to it's parent bottom.

I do not understand! what do you mean by "relative to it's parent bottom"?

11-24-2011, 08:23 AM
I want to have the bottom of the yellow window to always have the same minimum distance to the bottom of the purple window.

The distance can/should be larger if there are less items in it. The yellow window should grow if there are more items added to it. It should start to overflow when the minimum-distance is reached.

Let me try to explain that furter.

The parent is the purple window. The divitems window is yellow. When you start the example, the yellow window has some height with some items in it. If you click on '5 items', the yellow window grows until it reaches the max-height of 250px. Then it starts to overflow.

The bottom of the yellow window now has reached the minimum distance to the bottom of the purple window.

The purple window has an absolute bottom value. When the parent of the purple window resizes, the purple window's height is changed.

When that happens, I want the max-height of the yellow window to change as well. But I'm looking for a solution in CSS, not in javascript.

11-24-2011, 06:27 PM
Hard to tell which one is "purple" and "parent" usually refers to whatever encloses a child :)

But I think you mean "There are two boxes, divB and divC. When divB increases (maybe because of adding a new nav category, divC max-height increases a certain value as well."

Sorry there is no CSS solution for that. Try posting a simplified version of your question (model off the one I provided above) in the javascript forum!

11-25-2011, 01:27 PM
Sorry there is no CSS solution for that.

Unfortunately :(.

So I'll solve this with javascript. That's no problem, I was just looking for a nice CSS solution. I'm trying to minify all javascript required for this kind of DOM handling.

Thanks for your time.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum