jQuery错误地计算文档上的div高度

我正在尝试在页面加载后更改部分高度,但并不总是奏效.我知道我的代码改变高度是好的,它工作在窗口调整大小,只是初始调用后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/

解决方法

问题是与树标志！这是怎么回事？

您没有在图像上指定宽度和高度.当您这样做时,浏览器在document.ready上假定为0px高度1.在document.ready上,脚本会将头的高度计算为60px,并立即设置最​​小高度.

当图像加载时,标题的高度更改为101px;在这一点上,内容(标题,部分,页脚)增长了41px,因此是滚动条.

1如果图像从缓存加载,结果可能不同.

你有两个选择：

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(除非我误解了你想要做的).

原文地址：https://www.jb51.cc/jquery/175711.html