Hi you all,
I am trying to get the body (all the contents) to be always 100% in height.
That is to avoid what you can see in the attachment.
I guess this is not a very big deal but I can't seem to get it done!

Thanks a lot!

Add to the existing jQuery code in header.php, i.e. after

jQuery("ul.tw-nav-list").addClass("clearfix");

this:

var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}

if you have padding, margin, borders around table#layout you may have to adjust the actual height being set for table#layout, i.e.

var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
var targetheight = layoutheight - 30; /* div#wrapper - 2*15px for padding around table#layout */
jQuery('table#layout').css({height: targetheight + 'px'});
}

Hi Flynn,
Thanks a lot for the quick response.

Unfortunatelly it didn't work... Now, since I am not a programmer, I am never sure about what I do when it comes to coding!

So here goes the bit of header.php that I changed, just for you to check if it is ok:

jQuery("ul.tw-nav-list").addClass("clearfix");
var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
});
//-->

I checked and erased anything related with padding, margins and borders around table#layout. In any case I also tried the second version of your code with no success either.

Any other idea?
Thanks!

The closing bracket is missing

var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}

Sorry Flynn, but still nothing changed...

Here is what I tried:

jQuery("ul.tw-nav-list").addClass("clearfix");
var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}
//-->
</script>
<?php wp_h....

and

jQuery("ul.tw-nav-list").addClass("clearfix");
var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}
});
//-->
</script>
<?php wp_h....

Just in case I wasn't able to explain myself, I just uploaded an image... what you see on the left is how I see it now online... and what you see on the right is how I'd like it to be.

Try this, works for me:

// strech short pages to full height, keep footer at bottom
var windowheight = jQuery(window).height();
var headerheight = jQuery("td#header").height();
var footerheight = jQuery("td#footer").height();
var layoutheight = jQuery("div#wrapper").height();
if ( windowheight > layoutheight ) {
var newmiddleheight = windowheight - headerheight - footerheight - 43;
jQuery("td#middle").css({height: newmiddleheight + "px"});
}