Always on top html block for iPhone

By : Taho
Source: Stackoverflow.com
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

By : Taho


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



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.

By : ahawtho


This video can help you solving your question :)
By: admin