CODEWITHSUNDEEP
javascripthtmlcss
Bay
Bay

Reputation: 205

Two fluid height divs inside a fixed height container

I almost didn't dare to ask this question because it looks trivial but after spending more than 3 hours on stackoverflow and Google, I had to give it a go.

My problem: http://jsfiddle.net/RVPkm/7/

On initial state, the div#container is going to contain div#list-dynamic-2, where I want div#list-dynamic-2 to use the div#container's full height. Div#list-dynamic-1 is going to be inserted dynamically and is allowed to stretch up to 150px. Once div#list-dynamic-1's height reaches 150px, I want div#list-dynamic-2 to use the remaining space of 150px. I would also be happy if someone could tell me that this is pointless to achieve with CSS only and should be done with JavaScript instead.

(Btw, this is a simple example to show the problem and real usage would be to move selected users into the upper div and allow it to use 1/2 of div#container. Think of the upper div as some kind of shopping cart for users.)

Upvotes: 0

Views: 275

Answers (2)

scessor
scessor

Reputation: 16115

Here is a javascript solution:

var iDiff = 300 - document.getElementById('list-dynamic-1').offsetHeight;
document.getElementById('list-dynamic-2').style.height = iDiff + 'px';

Then you can remove max-height and height from css definition for #list-dynamic-2.

Also see your updated example.

For css I think you have to calculate, but most browsers don't support it yet.

Upvotes: 1

JoshNaro
JoshNaro

Reputation: 2097

This reminds me of the jQuery UI Layout Plug-in. See demo: http://layout.jquery-dev.net/demos/nested_sidebars.html

Upvotes: 0

Related Questions