我试图用我自己的jQuery解决StackOverflow问题yet another HTML/CSS layout challenge – full height sidebar with sticky footer.因为我的情况下的侧边栏可能比主要内容更长,与comment 8128008的情况相匹配.这使得在收缩浏览器窗口时不会有侧边栏比主要内容更长,并且没有问题的粘贴页脚.
现状：
我有一个带有div的html页面,它被自动拉伸以填满屏幕.所以如果元素下方有空的空间,那么我会向下伸展：
但是如果浏览器视口小于div本身,则不会拉伸,但滚动条显示：
我已经将jQuery附加到窗口的resize事件来调整div的大小,如果浏览器窗口不小,并在其他情况下删除任何调整大小.这可以通过检查视口是否高于或小于文档来完成.如果视口小于文档,似乎内容大于浏览器窗口,为什么没有调整大小？在另一种情况下,我们调整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应该调整大小,但文档大于窗口的高度,为什么我的脚本假设,不需要调整大小,并且div的大小被删除.
关键是实际上,如果我在Bug出现之后使用Firebug检查文档的高度,那么它的高度就是这个值.所以我想,文件的高度稍微延迟一点.我试图运行调整大小的代码延迟一点,但它没有帮助.
我在jsFiddle设置了一个演示.只是慢慢缩小浏览器窗口,你会看到div“闪烁”.还可以看到console.log()输出,你会注意到,在“闪烁”的情况下,文档的高度和窗口的高度是不同的,而不是相等的.
我在Firefox 7,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);
