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

Using Javascript to resize a div to screen height causes flickering when shrinking the browser window

提问by msiemens

The Background:

背景：

I tried to solve the StackOverflow question yet another HTML/CSS layout challenge - full height sidebar with sticky footeron my own using jQuery. Because the sidebar in my case may be longer than the main content it matches the case of comment 8128008. That makes it impossible to have a sidebar longer than the main content and having a sticky footer without getting problems when shrinking the browser window.

我试图解决 StackOverflow 问题，这是另一个 HTML/CSS 布局挑战 -使用 jQuery 自己解决带有粘性页脚的全高侧边栏。因为在我的案例中侧边栏可能比主要内容更长，所以它与评论 8128008的案例相匹配。这使得在缩小浏览器窗口时不可能有比主要内容更长的侧边栏和粘性页脚而不会出现问题。

The status quo:

现状：

I have a html page with a div, which is automatically stretched to fill the screen. So if there is empty space below the element, I stretch it downwards:

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

But if the browser viewport is smaller than the divitself, no stretching is done but the scrollbar shows up:

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

I've attached jQuery to the window's resize event to resize the div, if the browser window is not to small and remove any resizing in the other case. This is done by checking if the viewport is higher or smaller than the document. If the viewport is smaller than the document, it seems like the content is larger than the browser window, why no resizing is done; in the other case we resize the divto fill the page.

我已将 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());
}

The Problem:

问题：

Up to now, everything runs well. But if I shrink the browser window, there are cases, where the divshould be resized but the documentis larger than the window's height, why my script assumes, that no resizing is needed and the div's resizing is removed.

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

The point is actually, that if I check the document's height using Firebug after the bug appeared, the height has just the value is was meant to have. So I thought, the document's height is set with a little delay. I tried to run the resize code delayed a bit but it did not help.

关键是，如果我document在 bug 出现后使用 Firebug检查的高度，则高度的值恰好是本应具有的值。所以我想，document的高度设置有点延迟。我试图稍微延迟运行调整大小的代码，但它没有帮助。

I have set up a demonstration on jsFiddle. Just shrink the browser window slowly and you'll see the div"flickering". Also you can watch the console.log()output and you will notice, that in the case of "flickering" the document's height and the window's height are different instead of being equal.

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

I've noticed this behavior in Firefox 7, IE 9, Chrome 10 and Safari 5.1. Can you confirm it?

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

Do you know if there is a fix? Or is the approach totally wrong? Please help me.

不知道有没有解决办法？还是这种方法完全错误？请帮我。

采纳答案by tmsimont

Ok -- wiping my old answer and replacing...

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

Here's your problem:

这是你的问题：

You are taking and comparing window and document height, without first taking into consideration the order of events here..

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

1. Window loads
2. Div grows to window height
3. Window shrinks
4. Document height remains at div height
5. Window height is less than div height

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

At this point, the previously set height of the div is keeping document height greater than the window height, and this logic is misinterpreted: "Scrolling needed, no need to extend the sidebar" fires, erroneously

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

Hence the twitch.

因此抽搐。

To prevent it, just resize your div along with the window before making the comparison:

为了防止它，只需在进行比较之前调整您的 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);

Per pmvdb's comment, i renamed your $$ to "target"

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

回答by Marknl

$(window).bind('resize',function(){
    $("#resizeme").css("height","");

    if($("#resizeme").outerHeight() < $(window).height()){
       $("#resizeme").height($(window).height());
       $("body").css("overflow-y","hidden");  
    }else{
       $("body").css("overflow-y","scroll");  
    }           
});

回答by newbie

Maybe I am misunderstanding the problem, but why are you using Javascript? This seems like a layout (CSS) issue. My solution without JS: http://jsfiddle.net/2yKgQ/27/

也许我误解了这个问题，但你为什么使用 Javascript？这似乎是一个布局 (CSS) 问题。我没有 JS 的解决方案：http: //jsfiddle.net/2yKgQ/27/