|
锁定老帖子 主题：浏览器窗口大小变化时css的变化
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-16
最后修改：2011-04-17
最近做一个项目，发现了点问题，贴出来分析分析
做一个页面，页面布局需要根据屏幕大小的变化而变化。代码大致如下
<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"> </div>
<div id="right"> </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中较大者作为它的值。 以上纯属个人观点，不当之处还望口下留情并给予指正。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-04-18
没人鸟你啊
|
| 返回顶楼 | |
|
发表时间：2011-04-18
s929498110 写道 没人鸟你啊
你鸟了…… |
| 返回顶楼 | |
|
发表时间：2011-05-09
IE不支持min-width 噻～
|
| 返回顶楼 | |
|
发表时间：2011-05-09
要在resize事件里写重置代码的，贴个我的
window.onresize=function(){ // onresize will crash in IE6 if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);} } |
| 返回顶楼 | |
|
发表时间：2011-05-10
hkongm 写道 要在resize事件里写重置代码的，贴个我的
window.onresize=function(){ // onresize will crash in IE6 if ($.browser.version != '6.0') {$("#main").height($(window).height()-65);} } 是的，有这个事件响应，问题就解决了。多谢指教 |
| 返回顶楼 | |
|
发表时间：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？ |
| 返回顶楼 | |
|
发表时间：2011-06-30
一个minmax.js就行啦，搞那么复杂。
|
| 返回顶楼 | |
|
发表时间：2011-07-01
vimest 写道 一个minmax.js就行啦，搞那么复杂。
恩恩，js学得不够扎实呀。 |
| 返回顶楼 | |
|
发表时间：2011-08-25
resize都不用。。
|
| 返回顶楼 | |
