Question

我有一个简单的网站，其中包含标题，内容和页脚DIVS。内容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的高度？

由于

Answer 1

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');

jQuery调整内容DIV以将页脚DIV直接放在下面

1 个答案: