1

ヘッダー、コンテンツ、フッターの DIVS を含む単純な Web サイトがあります。コンテンツ DIV は JQuery を使用してページ コンテンツにスクロールしますが、フッターは最大サイズの .item div の下にとどまります。

$(document).ready(function () {
    $('a.panel').click(function () {
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr('href'), 800);

        return false;
    });

    $(window).resize(function () {
        resizePanel();
    });
});

function resizePanel() {
    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({
        width: width,
        height: height
    });
    $('#mask').css({
        width: mask_width,
        height: height
    });
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}

現在選択されている .item の高さだけになるようにコンテンツ コンテナー (ラッパー) のサイズを変更するにはどうすればよいですか?

ありがとう

4

1 に答える 1

0

http://jsfiddle.net/wC94k/1/

いくつかの明らかなスタイリングの問題から割り当て、フッターの動きのダイナミクスをもう少し優雅にします​​。

これは、既存のコードに追加した新しいコードの最大のチャンクです

wrapperHeight = $('#wrapper').height();
itemHeight = $('div#'+$(this).attr('href').replace('#', '')).height();
newHeight = (wrapperHeight - itemHeight) * -1;

$('#wrapper').css('margin-bottom', newHeight+'px');
于 2013-07-17T16:10:57.860 に答える