-1

我正在尝试将高度分配给主 div 容器，以仅将滚动赋予此“ rightContent ” div。

我所做的就是找到所有其他DIV的高度，然后用“”高度减去这些 DIV 的window高度，以将高度赋予主 div“ rightContent ”

但是我遇到了一个问题，我得到了除“ .tabstripContainer ” div 之外的所有“DIV”的高度，它是一个动态的DIV，它在运行时生成。

我在“ .ready() ”的页面末尾添加了下面的代码，但是当我运行代码时，它为“”返回“null tabstripContainer = $('.tabstripContainer').outerHeight();”

这是我运行代码时的输出：

在此处输入图像描述

==================================================== =========

但是当我在浏览器控制台中运行代码时，我也得到了正确的“ tabstripContainer = $('.tabstripContainer').outerHeight();”值。

这是我在浏览器控制台中运行代码时的输出： 在此处输入图像描述

==================================================== ================== 这是我的代码：

$(document).ready(function() {
    // -----------------------------------------------------
    // 100% height fill for splitter main window and panes [Master layout]
    // -----------------------------------------------------
    var bHeight = $('body').height(),
        wHeight = $(window).height(),
        headerHeight = $('header').outerHeight(),
        blueHeader = $('.blueHeader').outerHeight(),
        greyHeader = $('.greyHeader').outerHeight(),
        tabstripContainer = $('.tabstripContainer').outerHeight();

    changepush();
    $(window).resize(function() {
        wHeight = $(window).height();
        changepush();
    });

    function changepush() {
        if (wHeight >= bHeight) {
            var rightContent = wHeight - headerHeight - blueHeader - greyHeader - tabstripContainer;
            $('.rightContent').height(rightContent);

            alert("bHeight" + " > " + bHeight + " wHeight" + " > " + wHeight + " headerHeight" + " > " + headerHeight + " blueHeader" + " > " + blueHeader + " greyHeader" + " > " + greyHeader + " tabstripContainer" + " > " + tabstripContainer + " rightContent" + " > " + rightContent);
        }
    }
});

请建议！

4

2 回答 2

1

我没有足够的声誉来发表评论，所以不得不提供这个作为答案。

您是否尝试过使用 $(window).load 而不是 $(document).ready？前者在加载了额外的页面资源（例如图像）时触发，而后者将在 DOM 准备好时触发。

于 2015-05-04T22:16:59.897 回答
1

如果您在运行时创建内容，则需要等到发生这种情况。 document.ready在浏览器完成解析所有 DOM 之后触发，但在其他脚本（如 ajax 调用等）之前触发。

一种可能的解决方案是使用 a推迟调用，或者在显示内容后调用该函数。change push()setTimeout

另一种解决方案是在加载 div 内容后触发您自己的事件（即“contentLoaded”）。

您可以尝试使用window.load而不是document.ready，在所有外部请求完成后触发的事件（imgs、frames 等）。

setTimeout 参考：https ://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

jQuery 自定义事件：https ://learn.jquery.com/events/introduction-to-custom-events/

于 2015-05-04T22:21:53.623 回答