CODEWITHSUNDEEP
jquery
FastTrack
FastTrack

Reputation: 8980

Resize two DIVs Relative to Window Size

I currently have one DIV resizing to the full height of the window whenever a user resizes their browser like so:

$(window).resize(function() {
    $("#selected-folders-area").height($(window).height()-350);
});

NOTE: The -350 accounts for the header content

I want to add a second DIV to this page and when the browser is resized, both DIVs need to share the size of the window, filling it with their own heights to the bottom of the window.

I'm not sure if I'm being clear enough, so let me know if you need me to expand.

Upvotes: 0

Views: 774

Answers (2)

Denys Séguret
Denys Séguret

Reputation: 382130

What's wrong with this ?

$(window).resize(function() {
    var h = $(window).height()-350;
    $("#div1,#div2").height(h/2);
});

Note that if you want resizing proportional to content... well... that's one of those cases where a table for layout is hard to beat.

You could have different sizes like this :

$(window).resize(function() {
    var h = $(window).height()-350;
    $("#div1").height(h*0.45);
    $("#div2").height(h*(1-0.45));
});

Upvotes: 2

sabithpocker
sabithpocker

Reputation: 15566

$(window).resize(function() {
    var availableHeight = $(window).height()-350;
    var usedHeight = $('#div1').outerHeight() + $('#div2').outerHeight();
    var remainingHeight = availableHeight - usedHeight;
    //distribute remaing height to the divs as you like,this is 50/50
    //note that hight will decrease if it takes more than widow height already
    //if dont want that add your condition
    $("#div1,#div2").each(function(){
        $(this).height($(this).height() + remainingHeight/2);
        });

});

Upvotes: 0

Related Questions