Вот мой подход для основного элемента, который должен остаться в нижней части страницы.
Сначала 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>
вместе с позиции: фиксированная; –