1

How can I create a DIV block that always stays at the bottom of my page? When scrolling more content should show up right above the block. The only solution i can think of is to use 2 iframes but I prefer using CSS.

Update: The solution needs to work on iOS

Taho
  • 833
  • 1
  • 10
  • 9

2 Answers2

1
div.bottom {
  position:fixed;
}

Then just move it where you want. Unfortunately, browser support is limited. IE6 for example doesn't support this option for position. Also note that this removes the div from the flow, so you'll have to make sure there's enough space for the viewer to see stuff at the bottom of the page with the div on top.

Michael Mior
  • 28,107
  • 9
  • 89
  • 113
1

Here's some CSS:

.bottomFixed {
    position:fixed;
    bottom: 0;
    /* technically not necessary, but helps to see */
    background-color: yellow;
    padding: 10px;
}

Here's some HTML:

<div class="bottomFixed">Hello, world!</div>

This div would be placed at the bottom of the screen and stay there. Note: this won't work on iOS because of the way it does scrolling.

ahawtho
  • 704
  • 7
  • 8
  • is bottom:0 the bottom of the current screen or bottom of the page? I need it to show at the bottom of the current screen – Taho Sep 04 '10 at 01:23
  • Bottom of the screen for position:fixed – ahawtho Sep 04 '10 at 01:26
  • Just saw the update about iOS - on iOS, it's still the bottom of the "screen", but the display is just a viewport over the window's client area, so position: fixed doesn't work there. From what I've read, this is not possible on iOS. – ahawtho Sep 04 '10 at 01:39