Question

我正在尝试使用jQuery脚本来对齐两个div的高度。一切正常，直到我在其中一个div中有一些动态内容。当我在其中一个div中硬编码一些静态内容时，如：

<br>asd<br>asd<br> x 20

两个div都具有相同的height属性，但是当我将一些数据从DB加载到一个div时，它们是不同的。

我猜问题出现在.ready（）监听器中。文档说它在DOM完全加载时会触发，但看起来这不是事实。

我的问题是：我应该使用什么样的听众或其他“技巧”？我认为jquery / javascript解决方案比使用css更简洁，我希望能有这种解决方案。

提前致谢。

jquery脚本：

$(document).ready(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});

Answer 1

基础中的jquery使用事件document.ready是指所有DOM都准备就绪，直到这里生成jquery代码。是没有渲染jquery代码而没有渲染jquery库

的选项

如果您想在加载所有dom时添加事件包含您需要执行此操作的内容和图像

$(document).ready(function(){
$(window).load(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});
});

Answer 2

一旦网页完全加载了包括图像，脚本文件，CSS文件等在内的所有内容，您就可以使用window.onload来执行脚本。

window.onload = function() {
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }
};

用于满载动态内容的DOM的jQuery事件监听器

2 个答案: