javascript - 使用 Javascript 将 div 的大小调整为屏幕高度会在缩小浏览器窗口时导致闪烁

Question

背景:

我试图解决 StackOverflow 问题 yet another HTML/CSS layout challenge - full height sidebar with sticky footer我自己使用 jQuery。因为我的侧边栏可能比主要内容长，所以它与 comment 8128008 的情况相匹配。 .这使得侧边栏比主要内容长并且粘性页脚不可能在缩小浏览器窗口时不会出现问题。

现状:

我有一个带有 div 的 html 页面，它会自动拉伸(stretch)以填满屏幕。因此，如果元素下方有空白区域，我会将其向下拉伸(stretch):

但如果浏览器视口(viewport)小于 div 本身，则不会进行拉伸(stretch)但会显示滚动条:

我已将 jQuery 附加到窗口的调整大小事件以调整 div 的大小，如果浏览器窗口不是太小，则在其他情况下删除任何调整大小。这是通过检查视口(viewport)是否高于或小于 document 来完成的。如果视口(viewport)小于 document，内容似乎大于浏览器窗口，为什么不调整大小；在另一种情况下，我们调整 div 的大小以填充页面。

if ($(document).height() > $(window).height()) {
    // Scrolling needed, page content extends browser window
    // --> No need to resize the div
    // --> Custom height is removed
    // [...]
} else {
    // Window is larger than the page content
    // --> Div is resized using jQuery:
    $('#div').height($(window).height());
}

问题:

到目前为止，一切运行良好。但是如果我缩小浏览器窗口，在某些情况下，div 应该调整大小但 document 大于 window 的高度，为什么我的脚本假定不需要调整大小并且删除了 div 的调整大小。

实际上，如果我在 bug 出现后使用 Firebug 检查 document 的高度，高度就是应该有的值。所以我想，document 的高度设置有一点延迟。我尝试稍微延迟运行调整大小代码，但没有帮助。

我已经在 jsFiddle 上设置了演示.只需慢慢缩小浏览器窗口，您就会看到 div “闪烁”。您还可以观察 console.log() 输出，您会注意到，在“闪烁”的情况下，document 的高度和 window 的高度不同而不是相等。

我在 Firefox 7、IE 9、Chrome 10 和 Safari 5.1 中注意到了这种行为。你能证实吗？

你知道有没有修复？还是方法完全错误？请帮助我。

Answer 1

好的——擦掉我的旧答案并替换...

这是你的问题:

您正在获取并比较窗口和文档高度，而​​没有首先考虑此处的事件顺序。

1. 窗口加载
2. Div 增长到窗口高度
3. 窗口缩小
4. 文档高度保持div高度
5. 窗口高度小于div高度

此时，之前设置的div高度是保持文档高度大于窗口高度，这个逻辑被误解了:“需要滚动，不需要扩展侧边栏”错误地触发

因此抽搐。

为了防止这种情况发生，只需在进行比较之前调整你的 div 和窗口的大小:

(function () {
    var resizeContentWrapper = function () {
            console.group('resizing');


            var target = {
                content: $('#resizeme')
            };

            //resize target content to window size, assuming that last time around it was set to document height, and might be pushing document height beyond window after resize
        //TODO: for performance, insert flags to only do this if the window is shrinking, and the div has already been resized
            target.content.css('height', $(window).height());

            var height = {
                document: $(document).height(),
                window: $(window).height()
            };

            console.log('height: ', height);


            if (height.document > height.window) {
                // Scrolling needed, no need to externd the sidebar
                target.content.css('height', '');

                console.info('custom height removed');
            } else {
                // Set the new content height
                height['content'] = height.window;
                target.content.css('height', height['content']);

                console.log('new height: ', height);
            }
            console.groupEnd();
        }
    resizeContentWrapper();
    $(window).bind('resize orientationchange', resizeContentWrapper);
})(jQuery);

根据 pmvdb 的评论，我将您的 $$ 重命名为“target”