Always on top html block for iPhone

Question

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

Answer 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.

Answer 2

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.

Answer 3

See http://stackoverflow.com/questions/971123/css-fixed-to-bottom-and-centered

(why can't I post this as a comment? does stackoverflow have limitations to that?)