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
- 大小: 120.1 KB
- 大小: 128.3 KB
分享到：
相关推荐
HTML中的`frame`, `iframe`, 和`frameset`是用来创建多窗口或框架布局的重要元素，它们允许在同一个浏览器窗口中加载多个独立的网页。这些元素主要用于构建复杂的网页结构，使得不同内容可以并列显示，提高用户体验...
接下来，我们将详细讨论frame、iframe和frameset的区别和用法。 **Frame** Frame标签已经不再被推荐使用，因为它已从HTML5标准中废弃。在早期的HTML版本中，frame标签用于定义一个框架，让页面的一部分可以加载另...
里面包含了frameset，frame以及iframe的一些技术的演练，希望对大家有帮助，如果有什么补充或疑问，可以加QQ374053115进行和我讨论交流，互相进步！里面代码均手写，大致功能都已经实现，如果错误欢迎指出！
1. **<FRAMESET>**: `<FRAMESET>` 标签用于定义框架集，它是整个框架结构的基础。通过设置 `rows` 或 `cols` 属性，我们可以指定页面的垂直或水平分割。例如，`rows="90,*"` 表示将页面分为两部分，顶部占90%，底部...
页面框架内嵌示例,通过IFRAME与FRAMESET内嵌后不会出现滚动条的问题，以及top跳出框架的问题
JS 操作 Frameset、Frame、Iframe 对象 Frameset、Frame、Iframe 是 HTML 中的框架编程概念，它们可以将一个 HTML 页面分割成多个独立的区域，每个区域可以显示一个独立的 HTML 页面。JS 操作 Frameset、Frame、...
如果需要实现类似`frameset`的交互效果，可以结合`div`和`iframe`一起使用。 总的来说，通过熟练运用`div`和CSS，我们可以创建出与`frameset`类似甚至更灵活的布局，同时避免了`frameset`带来的问题。这要求开发者...
HTML中的Frame、Iframe和Frameset都是用于创建多窗口或者多页面布局的元素，它们各自有不同的特性和用途。 1. **Frameset与Frame的区别** - `<Frameset>` 是一个框架集元素，它用于定义页面的布局，将页面划分为多...
在探讨“IFrame中Session丢失的解决办法”这一主题时，我们首先需要理解Session与IFrame的基本概念及其在Web开发中的交互方式。Session是Web应用中用于存储用户特定信息的一种机制，它允许开发者在用户的会话期间...
iframe> 标签：iframe 是个内联框架，是在页面里生成个内部框架。 2.<frameset> 标签：frameset定义一个框架集，包含多个子框架，每个框架都有独立的文档。 <iframe> 标签 iframe 是个内联框架，是在...
然而，在HTML5中，frameset已不再被推荐使用，取而代之的是`<iframe>`标签和其他更现代的布局技术。 描述中提到的"NULL 博文链接：https://performery.iteye.com/blog/2242773"表明这是一个关于frameset的博客文章...
而`iframe`（内联框架）则是`frameset`中的一个子元素，它可以在一个页面中嵌入另一个页面，常用于实现部分内容的动态更新或引入外部资源。 在标题和描述中提到的"frameset父页面和子页面的方法之间调用个属性的...
本文将深入探讨`frameset`及其子元素`frame`、`noframes`、`iframe`的使用方法，并通过实例来解析如何设置这些元素的属性来实现复杂页面布局。 #### Frameset标签详解 `<frameset>`标签用于定义一个由多个框架组成...
在这个场景中，“实现div 遮罩 frameset”意味着在`frameset`布局的网页上，使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先，我们来看`frameset`。`frameset`是HTML4中的元素，它允许我们将浏览器窗口划分为...
### frameset元素属性详解 在HTML中，`frameset`元素是一种用于定义多窗口（或称为框架）布局的特殊元素，它允许在一个HTML文档中嵌入多个独立的HTML文档，从而实现网页的分屏显示。这在早期网页设计中非常流行，...
在网页设计领域，页面布局是至关重要的，它决定了用户如何与网站进行交互...然而，在某些特定场景下，frameset和frame仍然有用武之地，尤其是对于需要维护旧系统或者实现特定功能（如导航栏和内容区分离）的网页设计。
需要注意的是，`document.frames`是老式的方法，用于访问`<frameset>`内的`<frame>`元素，而在现代浏览器中，更推荐使用`contentWindow`或`contentDocument`来访问`<iframe>`的内容。在这个例子中，我们使用了`...