0

我正在尝试使用 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);

    }   
});
4

2 回答 2

2

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);

    }   
});
});
于 2013-01-28T13:45:58.153 回答
0

一旦网页完全加载了所有内容，包括图像、脚本文件、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);

    }
};
于 2013-01-28T13:57:32.800 回答