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

Question

的背景:

我试图用另一个HTML/CSS布局挑战解决StackOverflow问题-使用jQuery我自己使用粘性页脚的全高侧边栏.因为我的情况下边栏可能比主要内容长,所以它与评论8128008的情况相符.这使得侧边栏比主要内容更长,并且在缩小浏览器窗口时不会出现问题而不会出现问题.

现状:

我有一个带有a的html页面div,它会自动拉伸以填充屏幕.因此,如果元素下方有空白空间,我将其向下拉伸:

但是如果浏览器视口小于div它本身,则不会进行拉伸但滚动条会显示:

我已经将jQuery附加到窗口的resize事件来调整大小div,如果浏览器窗口不小,则在其他情况下删除任何大小调整.这是通过检查视口是高于还是小于document.如果视口小于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大小并且删除了调整大小.

关键是,如果我document在出现错误后使用Firebug 检查高度,那么高度恰好具有值.所以我想,这个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的评论,我将您的$$重命名为"目标"