jquery - jQuery 调整内容 DIV 的大小以将页脚 DIV 直接放在下方

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