浏览器窗口大小变更时css的变化-HTML教程-爱易网页

浏览器窗口大小变更时css的变化

日期：2014-05-17　浏览次数：20619 次

浏览器窗口大小变化时css的变化
最近做一个项目，发现了点问题，贴出来分析分析

做一个页面，页面布局需要根据屏幕大小的变化而变化。代码大致如下

<html> 
    <head>  
       <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">
       <meta http-equiv="expires" content="0">
       <title>页面自适应</title>  
	   <style type="text/css">
		#main{min-width:940px;width:100%;height:505px;border:1px solid red;}
		#left{width:200px;height:500px;border:1px solid blue;float:left;}
		#right{min-width:730px;width:100%;height:500px;border:1px solid green;float:left;}
	   </style>
    </head>  
    
    <body>
        <div id="main">
			<div id="left">&nbsp;</div>
			<div id="right">&nbsp;</div>
			<script type="text/javascript">
				//document.getElementById("main").style.width = document.body.offsetWidth;
				document.getElementById("right").style.width = document.getElementById("main").offsetWidth - 206 + "px";
			</script>
		</div>
    </body>
</html>

设定了最小宽度，保证在窗口大小变化时页面不至于严重变形。在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就行啦，搞那么复杂。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

浏览器窗口大小变更时css的变化

相关资料更多>

推荐阅读更多>