Как выровнять div по низу страницы, а не по низу экрана

Я хочу выровнять div по низу PAGE, а не по низу экрана. Когда я делаю это:

#contact-block{
position: absolute; 
    bottom: 0; left: 0; 
}

, div помещается в нижнюю часть экрана. Когда моя страница длинная, мне приходится прокручивать вниз, а элемент div, который должен был быть внизу, плавает где-то посередине.

Возможно, для этого есть простое решение, но я его просто не вижу.

Вот мой HTML:

<div id="left">
<div id="submenu"> <span class="menutitle">Services</span>
  <ul> 
  </ul>
 </div>

 <div id="contact-block">
 <span class="contacttitle">Contact</span></div>
</div>
<div id="content">
</div>

Я также добавил небольшое изображение, чтобы проиллюстрировать, что я имею в виду:

Красный div — это контактный div.

Редактировать: Я нашел решение с помощью jQuery и CSS. Возможно, это не лучшее решение, но оно работает.

jQuery:

var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
$("#contact-block").css("top", offset);
$("#contact-block").css("left", $("#wrapper").position().left);

CSS:

#contact-block {
position : absolute;
width:216px;
height:100px;
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
}