full screen layout with standard mode

最新推荐文章于 2024-07-25 11:52:08 发布

ys_r14

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量90

点赞数

文章标签： html js css ViewUI

本文链接：https://blog.csdn.net/ys_r14/article/details/84020303

版权

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:

[img]http://dl.iteye.com/upload/attachment/557492/3c28bd44-3dfe-33e4-ad6a-37419f58f5a2.png[/img]

ys_r14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
full screen layout with standard mode

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 im...
复制链接

扫一扫