Since you are positioning it absolutely, you could do something like this:
Give the body and html a minimum height, say 600px
, and give them relative positioning:
html, body
{
min-height: 600px;
height: 100%;
position: relative;
}
Then your element will always be at least 600px down the page, as long as the only relative parent it has is <body>
.
JSFiddle
This works because you are now assigning the position relative to the page, rather than the browser window, so since the body height has to be at least 600px, the element will always be positioned at the bottom of the body element.