Как подогнать размер div'a под клиентсую область окна браузера?

Используя JavaScript необходимо подогнать размер div'a под размер клиентской области браузера (т.е. размеров окна браузера за вычетом пространства включающего в себя весь пользовательсий интерфейс). При том размеры div'a и окна должны совпадать при ресайзе.

Мой способ:
Cразу скажу, что вижу тут как минимум два неприятных момента:
• Костыль в виде 15px
• Размер div'a равен размеру окна лишь в момент загрузки страницы. Аадаптация как таковая отсутсвует.

function O(obj)
{
if (typeof obj == 'object') return obj
else return document.getElementById(obj)
}

function S(obj)
{
return O(obj).style
}

browserWindow = $(window);
xxx = browserWindow.width() - 15; // учитывая ширину скроллбара, равную 15px
yyy = browserWindow.height();

S('ID_of_my_div').width = xxx;
S('ID_of_my_div').height = yyy;

Вопрос в том, как создать