Div внизу страницы

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

Я хочу, чтобы панель была внизу окна браузера, но не закрывала нижнюю часть страницы, когда человек прокручивается вниз.

Изменение: я хочу, чтобы панель оставалась в нижней части экрана, удалив фиксированную или изменив ее на относительную, разместите ее внизу страницы.

Я хочу, чтобы эта панель div отображалась только на одной странице, ее модуле для CMS, мне нужно, чтобы #bar был последним div на странице.

Изменение позиции: не поможет, потому что я также хочу, чтобы панель также прокручивалась на странице.

Я не хочу, чтобы у меня было 100px пространство внизу всех других страниц

HTML:

<!-- main div -->
<div id="master">

</div>

<!-- bar div -->
<div id="bar">

</div>

JQuery:

$(document).ready(function() {


    $('#bar').hide().delay(2000).fadeIn(1000);

});

JSFiddle Here