jQuery: изменяющий размер элемент обрезает родительский фон

Question

Я пытался воссоздать эффект из этого урока: http://jqueryfordesigners.com/jquery-look-tim-van-damme/

К сожалению, я хочу, чтобы фоновое изображение было внизу, и из-за изменения размера, происходящего в JavaScript, оно также изменяется и обрезается, например, так: http://dev.gentlecode.net/dotme/index-sample.html - вы можете просмотреть исходный код для проверки HTML, но базовая структура выглядит так:

<div class="page">
     <div class="container">
         div.header
         ul.nav
         div.main     
     </div> 
</div> 

Вот мой код jQuery:

$('ul.nav').each(function() {
    var $links = $(this).find('a'),
        panelIds = $links.map(function() { return this.hash; }).get().join(","),
        $panels = $(panelIds),
        $panelWrapper = $panels.filter(':first').parent(),
        delay = 500;

    $panels.hide();

    $links.click(function() {
        var $link = $(this),
            link = (this);

        if ($link.is('.current')) {
            return;
        }

        $links.removeClass('current');
        $link.addClass('current');

        $panels.animate({ opacity : 0 }, delay);
        $panelWrapper.animate({
            height: 0
        }, delay, function() {
            var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

            $panelWrapper.animate({
                height: height
            }, delay);
        }); 
    });

    var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';

    $links.filter(showtab).click();

});

В этом примере panelWrapper - это div.main, и его размер изменяется в соответствии с содержимым вкладок. Фон применяется к div.page, но, поскольку его дочерний элемент изменяется, он также изменяет размеры, обрезая фоновое изображение.

Это сложно объяснить, поэтому, пожалуйста, посмотрите на ссылку выше, чтобы понять, что я имею в виду.

Я думаю, что я пытаюсь спросить: есть ли способ изменить размер элемента без изменения размера его родителя? Я попытался установить height и min-height для .page на 100% и 101%, но это не сработало. Я пытался исправить фоновое изображение, но нада. Это также происходит, если я добавляю фон к телу или даже HTML. Помощь

Answer 1

Другим решением может быть использование jquery для установки минимальной высоты для элемента .page. Высота должна быть указана в пикселях, а не в процентах. Я проверил следующее, и это работает:

$('.page').css('min-height',$('body').height()+'px');

Но вам нужно будет запускать его всякий раз, когда окно браузера изменяется.

Для решения, не относящегося к javascript, вы можете поместить пузырьки в абсолютно расположенный элемент за содержимым. Используйте следующий CSS, чтобы div заполнил экран:

position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;

Вы должны убедиться, что это не находится в верхней части содержимого вашей страницы, задав более высокое значение z-index (для того, чтобы z-index вступил в силу, вам нужно установить position:relative или position:absolute содержание страницы)

Answer 2

Не могли бы вы добавить фоновое изображение к телу вместо элемента .page?

.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}

Тело заполняет окно браузера, но элемент .page имеет такой же большой размер, как и его содержимое, поэтому его обрезают при анимации содержимого.

Answer 3

Вы пытались добавить min-height: 100%; background-attachment: fixed; к элементу тела?

Однако background-attachment может и не понадобиться.