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

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.