CODEWITHSUNDEEP
jquerycss
cfed
cfed

Reputation: 60

Adjust div height based on window height

I was wondering what is the best method to achieve the results in this image http://dl.dropbox.com/u/24920447/screen_shot.jpg I have a sidebar that has content loaded in via ajax and its height will vary. If the height of the sidebar plus the header is less than the viewport I want a div at the bottom of the sidebar (yellow box) to be in the normal flow of the document. However if the height of sidebar plus the page header height is greater than viewport I want the div to be fixed to the bottom of the browser and for the inner sidebar content to be scrollable. I have set up this fiddle http://jsfiddle.net/cfed/B5bRt/4/

I was thinking the easiest way to do this would be alternating between classes with jquery but I am not sure how to execute this.

Any tips on how to tackle this would be much appreicated

Upvotes: 2

Views: 469

Answers (2)

Christian
Christian

Reputation: 19740

The footer repositioning is easy using classes, the scrolling ul is a little trickier. I have no doubt it's possible, but I found it easier to hack a solution together using javascript. So something like this would work:

var el = $('#sidebar');
var ul = el.find('ul');

el.removeClass('fixed');
ul.height('auto');

if (el.offset().top + el.height() > $(window).height()) {
    el.addClass('fixed');

    var ul_height = el.find('.default').offset().top - el.offset().top - el.find('.top').height();
    ul.height(ul_height);
}

Here's a working jsFiddle: http://jsfiddle.net/B5bRt/6/. It's actually a really hacky solution looking over it, but it works :)

Upvotes: 1

DACrosby
DACrosby

Reputation: 11430

Take a look into sticky footers. Some modifications thereof should be what you need. I forget the exact code you'll need, but I know I saw this effect when troubleshooting my own footer.

Upvotes: 0

Related Questions