当前位置:首页 > 开发 > Web前端 > Css > 正文

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

发表于: 2011-04-16   作者:com0606   来源:转载   浏览次数:
摘要: 最近做一个项目,发现了点问题,贴出来分析分析 做一个页面,页面布局需要根据屏幕大小的变化而变化。代码大致如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&g
最近做一个项目,发现了点问题,贴出来分析分析

做一个页面,页面布局需要根据屏幕大小的变化而变化。代码大致如下
<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中较大者作为它的值。

以上纯属个人观点,不当之处还望口下留情并给予指正。

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
JS获取浏览器窗口大小 各个方法预览 网页可见区域宽:document.body.clientWidth 网页可见区域高:d
直接上干货,技术实现已经使用在项目中: http://git.oschina.net/alexgaoyh/alexgaoyh <div id=
准确获得页面、窗口高度及宽度的JS function getPageSize(){ var xScroll, yScroll; if (window.inn
原文: CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一
效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏); 使用checkbox作为判
<!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人
最近在做响应式布局的页面,在开发测试过程中,为了看到页面在不同尺寸的窗口中的表现,因此要不停
这篇文档是我用了Qt一个月后,回来补充的。 问题:很多朋友刚用Qt,当我们把界面控件摆好后,再加la
我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号