Вот мой подход к основному элементу, который должен оставаться внизу страницы.
Сначала JavaScript. Функция centerBottom - это то место, где происходит действие.
<script type="text/javascript">
/**
* move an item to the bottom center of the browser window
* the bottom position is the height of the window minus
* the height of the item
*/
function centerBottom(selector) {
var newTop = $(window).height() - $(selector).height();
var newLeft = ($(window).width() - $(selector).width()) / 2;
$(selector).css({
'position': 'absolute',
'left': newLeft,
'top': newTop
});
}
$(document).ready(function(){
// call it onload
centerBottom("#bottomThing");
// assure that it gets called when the page resizes
$(window).resize(function(){
centerBottom('#bottomThing');
});
});
</script>
Некоторые стили, чтобы было понятно, что мы движемся. Это могут быть сложные движущиеся предметы абсолютно, если не знать высоты и ширины. DIV обычно имеют ширину 100%, если не указано, что может быть не тем, что вы хотите.
<style type="text/css">
body {
margin: 0;
}
#bottomThing {
background-color: #600; color: #fff; height:40px; width:200px;
}
</style>
И тело страницы:
<body>
<div id="bottomThing">
Put me at the bottom.
</div>
</body>