Я на самом деле никогда ничего не делал с динамическими страницами, растущими на мне, поэтому мне интересно, каков настоящий трюк. Я создал пример и дал ему некоторый динамический контент, однако, чтобы страница правильно реагировала, и плавно не идет так, как я думал.
Вот что я имею в настоящее время для моего контроллера jQuery
var container = $('#container'),
heightOrig = $(document).height(),
contHeightOrig = container.height(),
limit = 8,
current = 0;
$('.current').html( heightOrig + 'px' );
var end = setInterval(function() {
if ( current === limit ) {
if ( contHeightOrig != container.height() ) {
container.height($(document).height());
}
clearInterval( end );
}
var height = $(document).height(),
newEnd = $('.offset:last-child'),
appendNew = '<div class="offset"><p class="adjustment">HTML at ' + height + 'px</p></div>';
if ( contHeightOrig != container.height() ) {
container.height($(document).height());
}
newEnd.after(appendNew);
current++;
}, 1000);
Очевидно, что отображаемое содержимое сейчас просто добавлено, так как я пытаюсь понять функциональность этого.
Вам не нужно настраивать высоту страницы или контейнер с помощью javascript, если вы не устанавливаете фиксированные высоты для этих объектов. Когда вы добавите больше контента, их высоты будут автоматически корректироваться.
Измененный CSS
html, body { margin: 0; padding: 0; }
body > #container { min-height: 100%; }
#content { padding-bottom: 100px; }
#footer { clear: both; position: relative; z-index: 10; height: 100px; margin-top: 0; }
Измененный JS
var container = $('#container'),
heightOrig = $(document).height(),
contHeightOrig = container.height(),
limit = 8,
current = 0;
$('.current').html( heightOrig + 'px' );
var end = setInterval(function() {
if ( current === limit ) {
//if ( contHeightOrig != container.height() ) {
// container.height($(document).height()-100);
//}
clearInterval( end );
}
var height = $(document).height(),
newEnd = $('.offset:last-child'),
appendNew = '<div class="offset"><p class="adjustment">HTML at ' + height + 'px</p></div>';
//if ( contHeightOrig != container.height() ) {
//container.height($(document).height()-100);
//}
newEnd.after(appendNew);
current++;
}, 1000);
Вот обновленная вилка для вас:
РЕДАКТИРОВАТЬ:
Хорошо, вот jsfiddle с гладкой анимацией. Взял небольшой финал, и вы захотите очистить CSS и JavaScript. Решение не отличается от того, что я предлагал, просто добавил немного анимации для вас, которая настраивается на основе разницы между количеством контента и видовым окном (jQuery (window).height())
Удачи!
.animate()
для нового размера? Также я обновил свой код и заставил его работать без перерыва (-100 больше не был нужен, когда я удалил поля)