欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

easy full screen layout with iframe or frameset - 伊苏

更新时间: 2015-05-04 00:00:00 责任编辑: Author_N14

 

continue to study full screen layout concept.
I found a good approach with iframe or frame to resolve this issue.
now, overview the these days what I do, I find I my thing just like run into a traffic jam .
it's hard to implement full screen with pure table, td, div and use up rest height
but it's easy to get it with iframe or frame.

with iframe

index.hmtl
<html>
	<head>
		<title>full screen frame demo</title>
		<style>
			html, body {margin: 0; padding: 0;}
			table {height: 100%; width: 100%; border-collapse: collapse; padding: 0; margin: 0}
			table td {border: 1px solid #ccc;}
			div.container {height: 100%; width: 100%; border: 0px solid #777; margin: 0; padding: 0; overflow: auto;}
		</style>
		<script>
			window.onload=function(){
				var w=window.screen.availWidth;
				var h=window.screen.availHeight;
				window.moveTo(0, 0);
				window.resizeTo(w, h);
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2" style="height: 60px;" >
					<div class="container">
						<iframe id="frmTop" name="frmTop" frameborder="0" src="top.html"></iframe>
					</div>
				</td>
			</tr>
			<tr>
				<td width="150px; padding:0px; margin:0px;" >
					<div class="container">
						<iframe id="frmLeft" name="frmLeft" frameborder="0" height="100%" width="100%" src="left.html">not support iframe</iframe>
					</div>
				</td>
				<td>
					<div class="container">
						<iframe id="frmMain" name="frmMain" frameborder="0" height="100%" width="100%" src="main.html">not support iframe</iframe>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2" height="60px">
					<div class="container">
						footer
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>


top.html
<html>
	<head>
		<title>top</title>
		<script>
		function init(){
			var e=document.getElementById("lblDate");
			var d=new Date;
			e.innerHTML=d;
		}
		</script>
	</head>
	<body onload="init()">
		hello world, <br />today is <label id="lblDate" />
	</body>
</html>

left.html
<html>
	<head>
		<title>top</title>
		<script>
		function init(){
			var e=document.getElementById("divDirectory");
			var txt="";
			for(var i=0;i<50;i++){
				txt=txt.concat("content"+i+"<br />\n");
			}
			e.innerHTML=txt;
		}
		</script>
	</head>
	<body onload="init()">
		<div id="divDirectory"></div>
	</body>
</html>

main.html
<html>
	<head>
		<title></title>
		<script>
			window.onload=function(){
				var e=document.getElementById("abc");
				var txt="";
				var len=100;
				for(var i=0;i<len;i++){
					txt=txt.concat(i+"<br />");
				}
				e.innerHTML=txt;
			}
		</script>
	</head>
	<body>
		<div id="abc">
			
		</div>
	</body>
</html>


notes: in FF, it's confuse that div's height will be auto markup if use div stead of iframe. when content overflow div height. and in quirk mode, height of td has been
markup by div also.as per it's indicated by 100% height.
and div can't retrict the height of box. but the iframe can do it I think.
it's the reason it work with iframe but not div.


------------separator------------

implement with frameset

home.html
<html>
	<head>
		<title>FRAME DEMO</title>
	</head>
	<frameset rows="60px,*,30px">
		<frame src="frame_demo3_top.html" />
		<frameset cols="150px,*">
			<frame src="frame_demo3_left.html" />
			<frame name="dynamicFrame" src="frame_demo3_main.html" />
		</frameset>
		<frame src="frame_demo3_bottom.html" />
	</frameset>
</html>

top.html
<html>
	<head>
	</head>
	<body>
		this is top html
	</body>
</html>

left.html
<html>
	<head>
		<script>
			window.onload=function(){
				var d=document.getElementById("d");
				var len=50;
				var txt="";
				for(var i=1;i<len;i++){
					txt=txt.concat("content "+i+"<br />");
				}
				d.innerHTML=txt;
			}
		</script>
	</head>
	<body>
		catalog:
		<div id="d"></div>
	</body>
</html>

main.html
<html>
	<head>
		<script>
			window.onload=function(){
				var d=document.getElementById("d");
				var len=50;
				var txt="";
				for(var i=1;i<len;i++){
					txt=txt.concat("chapter "+i+"<br />");
				}
				d.innerHTML=txt;
			}
		</script>
	</head>
	<body>
		content:
		<div id="d"></div>
	</body>
</html>

bottom.html
<html>
	<head>
	</head>
	<body>
		this is bottom html
	</body>
</html>


the result as below, it work in IE6, FF6, chrome12, and look's good

iframe result


frameset result


上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2015-05-04 00:00:00
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1614827/
本文WWW.DOC100.NET DOC100.NET版权所有。