My goal is to create a fixed header and footer, allowing the main content to scroll underneath while keeping the right navigation in place.
To achieve this effect, I've been experimenting with different solutions. One of my attempts can be viewed here: http://jsfiddle.net/sjUBQ/. However, in order to show a scrollbar, I had to set a fixed height for the main content section using CSS.
I also tried incorporating jQuery code into the mix:
$(document).ready(function() {
var desiredHeight = $("body").height() - $("head").height() - $("footer").height();
$(".yui3-u-3-5").css("min-height", desiredHeight );
});
Unfortunately, this solution did not work as expected. Can anyone guide me on how to achieve a sticky header and footer setup while ensuring that the inner div displays a scrollbar when the content exceeds the browser window height?