浏览器窗口大小变化时css的变化
最近做一个项目,发现了点问题,贴出来分析分析
做一个页面,页面布局需要根据屏幕大小的变化而变化。代码大致如下
设定了最小宽度,保证在窗口大小变化时页面不至于严重变形。在div中设定width的百分比,是以body为参照的。但是设定height的百分比,它就不那么听话了,解决办法是同时在css中设定html和body的height。
为了在左边div宽度固定时右边div能根据屏幕大小变化而变化,用了js来控制,如上面代码所示。
但是当浏览器窗口变小时,右边的div就跑到下面了。估计就是id为main的div宽度不够所致,在火狐下用Firebug看也没发现什么。后来在js中加上document.getElementById("main").style.width = document.body.offsetWidth;
就一切正常了。
然后就开始想到底是怎么回事。js只会在页面刷新时运行,窗口大小变化时只有css起作用了。注掉添加的那句js,分别去掉main和right的min-width,在火狐下仍然看不出什么,在IE8下,去掉main的min-width发现main的宽度变小了,去掉right的min-width后right的宽度不发生变化。个人认为在窗口大小变化的时候,如果设定了min-width就会以变化之前的width和css中已设定min-width中较大者作为它的值。
以上纯属个人观点,不当之处还望口下留情并给予指正。 1 楼 s929498110 2011-04-18 没人鸟你啊 2 楼 com0606 2011-04-18 s929498110 写道没人鸟你啊
你鸟了…… 3 楼 meepo3927 2011-05-09 IE不支持min-width 噻~ 4 楼 hkongm 2011-05-09 要在resize事件里写重置代码的,贴个我的
window.onresize=function(){
// onresize will crash in IE6
if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);}
}
5 楼 com0606 2011-05-10 hkongm 写道要在resize事件里写重置代码的,贴个我的
window.onresize=function(){
// onresize will crash in IE6
if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);}
}
是的,有这个事件响应,问题就解决了。多谢指教 6 楼 ludatong110 2011-06-28 com0606 写道hkongm 写道要在resize事件里写重置代码的,贴个我的
window.onresize=function(){
// onresize will crash in IE6
if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);}
}
是的,有这个事件响应,问题就解决了。多谢指教
能说下为什么要减去65?
7 楼 vimest 2011-06-30 一个minmax.js就行啦,搞那么复杂。