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 并立即在部分上设置最小高度。

当图片加载时，header 的高度变为101px；此时，内容(页眉、部分、页脚)增长了 41 像素，因此滚动条增加了。

¹ 如果图像是从缓存中加载的，结果可能会有所不同。

你有两个三个选项:

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

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

Demo here , 似乎有效。

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

3. 更好的是，使用 CSS sticky footer (除非我误解了你的意思)。