I've been exploring this issue in the past, and eventually gave up on it. It looks like the gap comes from clearfix class. :after selector sets 'content' property, which is adds that space in there.

http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/

As a quick-fix, I made the footer move down the page by setting something like "min-height: 600px" to the class 'elgg-main'.  It doesn't make the footer sit perfectly at the bottom of the screen, but it does stop it hovering in the middle.

@TW... What an inspirational tutorial your link provides. I  shall now attempt to adapt it to elgg 1.8.

@juBo... As you say 'a quick fix' for your screen but you have to design for many differing screen dimensions.

I just find that it creates a more proportional layout in the short term.  Thinking about the purpose of the design, and the expectation that the page will soon fill up with (user generated) content. 

It wasn't only about what I see on my screen :)

There's a tutorial here about Elgg sticky footer,

http://www.perjensen-online.dk/03/elgg-sticky-footer/

gillie... Sticky Footer is a good plugin but as with the info in the tutorial above the sidebar background colour stays at a height dictated to it by the content of the sidebar itself. I've tried changing the sidebar to min-height: 100%;  the ellgg-layout and the elgg-layout-one-sidebar but nothing lengthens the height of the background colour. Any ideas anyone?

Sticky footer might not be what you want. Seems like you want the content background (body/sidebar) to strech, to fill the browser height.

But you are right the sidebar height follows the height of .elgg-layout (sidebar_background.gif).

jQuery?

--------------------------------

<script>
//Initial load of page
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

//Dynamically assign height
function sizeContent() {
    var newHeight = $("html").height() - $(".elgg-page-header").height() - $(".elgg-page-footer").height() - $(".elgg-page-topbar").height() + "px";
    $(".elgg-page-body").css("min-height", newHeight);
    $(".elgg-layout-one-sidebar").css("min-height", newHeight);
}
</script>

--------------------------------

(...in meta.php)