Как создать DIV с содержимым с вертикальной прокруткой и фиксированным нижним колонтитулом, который всегда виден?

HTML должен представлять собой следующее (извините за формат и форматирование, но я не знаю, как поместить образец HTML)

<div id="dialog-window">
  <div id="scrollable-content">
    what ever content here...div's, ul's and li's
  </div>
  <div id="footer">
  </div>
</div>

Результат, который я ищу - всегда должна быть вертикальная полоса прокрутки только для содержимого, а нижний колонтитул должен быть всегда виден в нижней части диалогового окна. Диалоговое окно - это диалог фиксированного размера.

Я попробовал с некоторыми идеями из других сообщений здесь, но они не удовлетворяют всем требованиям. Любые идеи сделать это с помощью CSS (js и jquery также приветствуются)