jQuery错误计算文档准备好的div高度

Question

我试图在页面加载后更改截面高度,但它并不总是有效.我知道我的代码更改高度很好,它适用于窗口调整大小,只是在document.ready之后的初始调用并不总是有效.

var $window = $(window);

function wrap_element_link_mobile(object, path) {
    if ($(this).width() < 921 && !object.parent().is('a')) {
        object.wrap("<a href='" + path + "'></a>");
    } else if ($(this).width() > 920 && object.parent().is('a')) {
        object.unwrap();
    }
}

function resize_section() {
    var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7;
    $('section').css('min-height', sectionMinHeight);
}

/* Called after document Load
================================ */

$(document).ready(function () {
    var $mainLogo = $('#main-logo');

    wrap_element_link_mobile($mainLogo, '/');
    resize_section();

    $window.resize(function () {
        wrap_element_link_mobile($mainLogo, '/');
        resize_section();
    });
});

在初始调用中创建了一个console.log后,我发现它已被调用但由于某种原因它无效.

*编辑我看到的屏幕

注意滚动条,如果我完全调整窗口大小,它会消失并且是适当的高度.

http://jsfiddle.net/QHSm3/6/

Answer 1

问题是树标志!!! 这是发生的事情:

您没有在图像上指定宽度和高度.执行此操作时,浏览器假定document.ready ¹的高度为0px.在document.ready上,您的脚本会将标头的高度计算为60px,并立即在节上设置最小高度.

加载图像时,标题高度变为101px ; 此时,内容(标题,部分,页脚)增长了41px,因此滚动条.

¹ 如果从缓存加载图像,结果可能会有所不同.

你有 二 三种选择:

1:在HTML源代码中指定图像尺寸:

<img alt="Tree Logo" id="main-logo" src="logo.png" width="83" height="101"/>

在这里演示,似乎有效.

2:在window.load而不是document.ready上计算高度.

3.更好,使用CSS粘性页脚(除非我误解了你想要做的事情).