Reputation: 543

A div at the bottom of a page

I have a popup bar at the bottom of the screen, the popup bar appears but it covers the bottom of the screen.I have the div under the other div but it still covers the bottom of the page

I want the bar to be at the bottom of the browser window but not to cover the bottom of the page when the person scrolls to the bottom.

Edit: I want the bar to stay at the bottom of the screen, by removing fixed or changing it to relative will place it at the bottom of the page.

I want this div bar only to appear on one page, its a module for a CMS, I need the #bar to be the last div on the page.

Changing the position: will not help because I also want the bar to also scroll on the page.

I don't want the to have to a 100px space on the bottom of all the other pages

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

Upvotes: 0

Answers (5)

Mokhlesur Rahman

Reputation: 761

try margin-bottom:100px; to the id #master

here is the jsfiddle link http://jsfiddle.net/banded_krait/3vYGS/7/

EDIT:

if you want to make it in all pages of your website than you have to put margin or padding to the body tag of your page and that will solve your problem and it will work in every page. :)

body{
   margin-bottom:100px;
}

Upvotes: 1

Arun Kumar

Reputation: 1667

try this demo

margin-bottom:14%; in #master

Upvotes: 0

Muhammad Ali Bala

Reputation: 368

Just replace this

#master {
    border-style:solid;
    border-width:1px; 
    width:95%;margin:30 auto; 
    border-color: blue; 
    margin-bottom:70px;
    //height: 600px;
}

Upvotes: 1