full screen layout with standard mode

伊苏

浏览: 111311 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

html js css

in quirk, take full screen with table is convenience, but it's not work in FF.
and I wanta try to stand my code close w3c stand more: with standared mode.
so, I use div + css, with position fixed implement in FF first.
and hack css for IE6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>full screen layout with standard mode</title>
		<style>
			html, body {
				/*for IE6, relate to body real time size, FF absolute div is relate to window inner size defaultly*/
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			body div {
				border: 1px solid #ccc;
				position: fixed;
				overflow: auto;
				/*ie6 css hack*/
				_position: absolute;
				
			}
			.top {
				top: 5px;
				height: 50px;
				left: 5px;
				right: 5px;
				/*ie6 css hack*/
				_width: expression(document.body.offsetWidth-10+"px");
			}
			.footer {
				bottom: 5px;
				height: 30px;
				left: 5px;
				right: 5px;
				/*ie6 css hack*/
				_width: expression(document.body.offsetWidth-10+"px");
			}
			.left {
				top: 60px;
				bottom: 40px;
				left: 5px;
				width: 190px;
				/*ie6 css hack*/
				_height: expression(document.body.offsetHeight-110+"px");
			}
			.main {
				top: 60px;
				bottom: 40px;
				left: 200px;
				right: 5px;
				/*ie6 css hack*/
				_width: expression(document.body.offsetWidth-205+"px");
				_height: expression(document.body.offsetHeight-110+"px");
			}
		</style>
		<script>
			var $=function(id){
				return document.getElementById(id);
			}
			var isIE=navigator.appName.match(/explorer/i)?true:false;
			window.onload=function(){
				var txt=document.compatMode;
				$("lblBrowser").innerHTML="browser: "+navigator.appName+", "+navigator.appVersion;
				$("lblIsIE").innerHTML="browser: "+navigator.appName+", is IE: "+isIE;
				$("lblMode").innerHTML=txt;
				
				getTree();
			}
			function getTree(){
				var txt="<ul>";
				var len=50;
				for(var i=1;i<=len;i++){
					txt=txt.concat("<li value='"+i+"'>"+i+"</li>");
				}
				txt=txt.concat("</ul>");
				$("divLeft").innerHTML=txt;
			}
			function getMain(){
			}
		</script>
	</head>
	<body>
		<div class="top">
			<label id="lblBrowser"></label>
		</div>
		<div class="left" id="divLeft">
		</div>
		<div class="main" id="divMain">
		</div>
		<div class="footer">
			<label id="lblIsIE"></label>
			<label id="lblMode"></label>
		</div>
	</body>
</html>

note: chrome support both:
1.calc div 100% restrict with td rest height in quirk mode
2.position fixed in standared mode

result: