|
|
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 >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 ><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
 |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡