CODEWITHSUNDEEP
csshtml
Yeti
Yeti

Reputation: 877

CSS HTML Vertical auto size and scroll on demand

So here's what I want to do: Let there be a fixed size column. The height of the column should take up the size of the parent.

Inside the column I have two divs, stacked vertically. The width of both of them takes up the column width. The height of the first div is fixed size. The second however is variable, taking up whatever remains from the parent. Moreover its content is variable. If its content is to large a vertical scroll bar should appear.

How can I do this with HTML and CSS?

Here's a quick JSFiddle POC.

My problem is that if I set the second divs height as auto it will stretch outside its parent. If I set it 100% it will be again larger than its parent. It's important that the scroll bar to appear only for the second div, not the main div itself.

Thanks,

Upvotes: 1

Views: 922

Answers (1)

Salketer
Salketer

Reputation: 15711

Here is what I would do:

http://jsfiddle.net/Tfzhm/1/

Add position:relative to the container div, and make the scrollable div position:absolute. The top should be set to the same amout of pixel as the height of the first stacked div. And finally, set bottom:0px so it gets to the bottom line of the containing div.

Upvotes: 3

Related Questions