CODEWITHSUNDEEP
javascriptjquerycss
Jacob Windsor
Jacob Windsor

Reputation: 6980

Set height of div but keep fluid

I have a situation where I need to make a div the same size as an absolutely positioned sidebar. I sorted that using this bit of jQuery;

$('#main').height('auto');
top_height = $('.toolbar').outerHeight();
side_height = $('#RightSideBar').height();
body_height = $('#main').innerHeight();
console.log(body_height + '  ' + side_height);
if (body_height < side_height){
    $('#main').height(side_height + top_height);
}
else {
    $('#main').height(body_height);
}

I have ran into a new problem due to the dynamic nature of some content on some pages. Since the height of #main is absolutely set if the size of its content increases the size of the div will not increase with it and vice versa.

I need the div to be set the same height as the sidebar and remain fluid with its content. So the div would increase and decrease in height up to the height of the sidebar.

I hope that is easily understandable, if its not please say so.

Upvotes: 0

Views: 67

Answers (2)

willanderson
willanderson

Reputation: 1578

instead of setting the height of #main with your calculations, try setting the min-height:

if (body_height < side_height){
    $('#main').css('min-height', side_height + top_height);
}
else {
    $('#main').css('min-height', body_height);
}

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24713

You can do this without javascript. You need a relative positioned parent that will auto size to side bar and then an absolute positioned div that adopts 100% height of parent. Never is there a set height, always fluid.

DEMO http://jsfiddle.net/nSBaA/1/

#wrapper {
    position: relative;
}
#main {
    position: absolute;
    height: 100%;
    width: 70%;
}
#sidebar {
    float: right;
    width: 20%;
}

Upvotes: 0

Related Questions