我试图根据窗口高度有不同的浏览器行为。
我想要的是
如果用户在上网本上,我的脚本只会激活css overflow-y“auto”,如果内容大于屏幕用户可以看到所有内容。
如果用户在一个大屏幕上,我想要溢出隐藏,只有我的主div与overflow =’auto’,所以页脚可以在屏幕的底部,但如果大于屏幕,内容也可以是viwed。
我想要的是
如果用户在上网本上,我的脚本只会激活css overflow-y“auto”,如果内容大于屏幕用户可以看到所有内容。
如果用户在一个大屏幕上,我想要溢出隐藏,只有我的主div与overflow =’auto’,所以页脚可以在屏幕的底部,但如果大于屏幕,内容也可以是viwed。
发布这个的基本代码,它在Mac上的大屏幕上工作,但在Internet Explorer上,它不会在大屏幕或小屏幕上
该怎么办?
感谢您的帮助提前
CSS
html,body { min-width: 600px; margin: 0; padding: 0; overflow: hidden; } #header { position:relative; /* IE7 overflow bug */ clear:both; float:left; width:100%; height: 200px; overflow: hidden; } #main { position:relative; /* IE7 overflow bug */ clear:both; float:left; width:100%; overflow-x: hidden; } #footer { position:relative; /* IE7 overflow bug */ clear:both; float:left; width:100%; height: 100px; overflow: hidden; }
jQuery的
if( typeof( window.innerWidth ) == 'number' ) { // No-IE var screen_height = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6 + var screen_height = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 var screen_height = document.body.clientHeight; } var header_height = $('#header').height(); var footer_height = $('#footer').height(); var main_height = screen_height - header_height - footer_height; // if (navigator.userAgent.toLowerCase().search("iphone") > -1 || navigator.userAgent.toLowerCase().search("ipod") > -1) { $('body').css('overflow-y','auto'); } else { if(screen_height > 550) { $('#main').css('height',main_height + 'px'); $('#main').css('overflow-y','auto'); } else { $('html,body').css('overflow-y','auto'); } }
解决方法
$('html,body').css('overflowY','auto');
解决这个问题。