Format a DIV into a top-most panel bar

Question

I'm writing some CSS. I want to create a panel bar, which is always top-most and stays at the bottom of the page, height is fixed at 50px and width is unknown. Can a normal DIV do that?

Thank you in advance.

possible duplicate of [CSS sticky footer](http://stackoverflow.com/questions/3906065/css-sticky-footer) — PeeHaa, Nov 09 '11 at 17:07

Chris Sobolewski · Answer 1 · 2011-11-10T14:09:27.303

1

At the bottom of the WINDOW? Or the bottom of a page?

If you're looking for it to be at the bottom of your document, then you're looking for something like Sticky-Footer

If you want it at the bottom of the window and to remain while you scroll, you need Position:fixed.

Edit: If you want it to stay on the bottom of the window like the Facebook chat bar, you need this:

.bottom{
    position:fixed;
    bottom:0;
}

edited Nov 10 '11 at 14:09

answered Nov 09 '11 at 17:09

Chris Sobolewski

12,819
12
63
96

it looks like the Facebook chat bar – Hoang Lam Nov 10 '11 at 06:49

score 0 · Answer 2 · answered Nov 09 '11 at 17:06

0

position:fixed; bottom:0 should do the trick.

answered Nov 09 '11 at 17:06

Damon Bauer

2,718
1
22
35

1

There are numerous complications that make it not so simple. The biggest one is that the bottom of the document may not always be the height of the browser window. You need some tricks to keep the div at the bottom. – Chris Sobolewski Nov 09 '11 at 17:11

score 0 · Answer 3 · answered Nov 09 '11 at 17:10

A div are block elements, so inheritly are full width of their containing element. If their containing element is the body tag, and has no width restrictions set, the div should be full browser width.

div {
  position: absolute;
  bottom: 0;
  height: 50px;
  z-index: 1000; /* optional, but I set for insurance */
}

Format a DIV into a top-most panel bar

3 Answers3