使用Javascript根据屏幕高度调整div的大小会在缩小浏览器窗口时导致闪烁 背景：

我尝试使用jQuery自己解决StackOverflow问题。因为在我的例子中，侧边栏可能比它与案例匹配的主要内容长。这使得侧边栏的长度不可能超过主内容，并且页脚很粘，在缩小浏览器窗口时不会出现问题

现状： 我有一个带有

div

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

但是，如果浏览器视口小于

div

本身，则不会进行拉伸，但会显示滚动条：

我已将jQuery附加到窗口的调整大小事件，以便在浏览器窗口不太小的情况下调整

div

，并在其他情况下删除任何调整大小的操作。这是通过检查视口是否高于或小于

文档来完成的。如果视口小于
文档
，则内容似乎大于浏览器窗口，为什么不调整大小；在另一种情况下，我们调整
div
的大小以填充页面

if（$（文档）.height（）>$（窗口）.height（））{
//需要滚动，页面内容会扩展浏览器窗口
//-->无需调整div的大小
//-->“自定义高度”已删除
// [...]
}否则{
//窗口大于页面内容
//-->使用jQuery调整Div的大小：
$（'#div'）.height（$（window.height（））；
}

问题是：
到目前为止，一切运行良好。但是如果我缩小浏览器窗口，就会出现这样的情况：应该调整
div
的大小，但是
文档的高度大于
窗口的高度，为什么我的脚本会假设不需要调整大小，而
div
的大小会被删除

事实上，如果我在bug出现后使用Firebug检查
文档的高度，那么高度正好是应该的值。所以我想，
文档的高度设置有一点延迟。我试图运行调整大小的代码延迟了一点，但没有帮助

我已经组织了一场示威游行。只要慢慢缩小浏览器窗口，您就会看到
div
“闪烁”。您还可以查看
console.log（）
输出，您会注意到，在“闪烁”的情况下，
文档的高度和
窗口的高度是不同的，而不是相等的

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

你知道有没有解决办法吗？还是这种方法完全错误？请帮帮我。
好的——擦除我的旧答案并替换

这是你的问题：

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

窗口负载
Div增长到窗口高度
窗收缩
文档高度保持在div高度
窗口高度小于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”
也许我误解了这个问题，但您为什么要使用Javascript？这似乎是一个布局（CSS）问题。没有JS的我的解决方案：
$（窗口）.bind（'resize'，function（））{
$（“#resizeme”）.css（“高度”）；
if（$（“#resizeme”）.outerHeight（）<$（window.height（））{
$（“#resizeme”）.height（$（window.height（））；
$（“body”）.css（“overflow-y”、“hidden”）；
}否则{
$（“body”）.css（“overflow-y”、“scroll”）；
}           
});
格式非常好的问题+1有点离题，但您正在将
jQuery
作为参数传递给您的自调用函数，而该函数不接受任何参数。我玩了一点，这与您想要的接近吗@Esailija——我可能错了，但是在这里使用超时不是会对页面性能造成损害吗？每次调整大小都有一个超时？虽然有效，但有点像用手榴弹杀死蚊子。看看我下面的答案，有一个简单得多的解决方案（也许）应该可以提高性能，因为浏览器不需要在每次调整大小后计算溢出，而只需要在每次调整大小会话后计算溢出（调整大小会话长150毫秒）。一次只有一个超时处于活动状态，我不是100%确定，但影响性能的是活动的并发计时器的数量，而不是重置一个计时器？jQuery在内部每13毫秒启动一个新的超时：p这就是我链接到的原因。正如前面提到的，如果不使用Javascript，css解决方案（请参阅并缩小浏览器窗口）导致的错误将无法解决。IE6+不允许您使用纯css来解决此问题，这可能就是为什么Javscriptworks应该这样做的原因。谢谢！：）不知怎的，我没有考虑你所描述的事件的顺序。
$(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");  
    }           
});