Question

我有一个基本的html文档，它根据url哈希加载一个html文件。我有这个代码来加载和调整主div：

$(function() {

    var newHash      = "",
        $mainContent = $("#mainContent"),
        $pageWrap    = $("#kofa"),
        baseHeight   = 0,
        $el;



    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");

        newHash = window.location.hash.substring(1);

        $pageWrap.height($pageWrap.height());
        /*baseHeight = $pageWrap.height() - $mainContent.height();*/

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(20, function() {
                    $mainContent.hide().load(newHash + ".html", 
                    function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        }, 100, "swing", function() {
                        $mainContent.fadeIn(100);
                        });
                        $("nav a").removeClass("selectedMenu");
                        $("nav a[href='#"+newHash+"']").addClass("selectedMenu");
                    });
                });
        };

        return false;
    });

    $(window).bind('hashchange', function(){



    });

    $(window).trigger('hashchange');

});

代码可以工作，但似乎它不会等到文档的每个部分在更改高度之前加载，这导致......好吧：http://thecardinal.uphero.com/（部分内容在主要div之外。看来，点击菜单中的按钮或通过F5刷新页面后，它的高度正确。（您可以检查上面给出的网站以获取更多代码）

Answer 1

为什么不使用100％的高度？因此可以

$("nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(20, function() {
                $mainContent.hide().load(newHash + ".html", 
                function() {
                    $pageWrap.animate({
                        height: '100%'
                    }, 100, "swing", function() {
                    $mainContent.fadeIn(100);
                    });
                    $("nav a").removeClass("selectedMenu");
                    $("nav a[href='#"+newHash+"']").addClass("selectedMenu");
                });
            });
    };

    return false;
});

和css

#kofa {
   height: 100%;
}

jQuery没有设置正确的高度

1 个答案: