如何获得iframe来填充所有可用空间? [英] How to get an iframe to fill all available space?
本文介绍了如何获得iframe来填充所有可用空间?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个标准网页，在该网页的底部总是需要一个导航栏，其中包含上一个"，下一个"等.和顶部的标题.我需要页面始终填充整个浏览器窗口，而不管它的大小是多少，iframe始终填充标题和导航栏之间的所有空间(除边距等).我怎样才能做到这一点?完全可以接受使用jQuery.
I have a standard web page where I need a navigation bar always on the bottom of the page, with "Prev", "Next" et al. and a header at the top. I need the page to always fill the entire browser window, regardless of what size it is or becomes, and the iframe to always fill all the space (except for margins etc.) between the header and the navigation bar. How can I do this? Use of jQuery is quite acceptable.
推荐答案
尝试使用此方法...
Try this one...
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<base target="mainFrame">
<style type="text/css">
BODY {
margin: 0px;
padding: 0px;
overflow: hidden;
background: #DBE8F0;
font: normal 11px Arial;
}
.ParentContainer {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
text-align: left;
background: #B1CCDE;
}
.MainContainer {
height: 100%;
margin: 0px;
padding: 0px;
width: 1003px; /* comment this line to set full page width */
}
.HeaderRow {
height: 100px; /* change this value to modify height of page header */
}
.HeaderRow .HeaderContainer {
height: 100%;
width: 100%;
}
#mainFrame {
width: 100%;
}
.FooterRow {
height: 50px; /* change this value to modify height of page footer */
}
.FooterRow .FooterContainer {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table class="ParentContainer" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table class="MainContainer" border="0" cellspacing="0" cellpadding="0">
<tr class="HeaderRow" id="HeaderRow">
<td valign="top">
<table class="HeaderContainer" id="HeaderContainer">
<tr>
<td><h1>Page header</h1></td>
</tr>
</table>
</td>
</tr>
<tr class="ContainerRow">
<td><iframe src="" name="mainFrame" id="mainFrame" frameborder="1"></iframe></td>
</tr>
<tr class="FooterRow" id="FooterRow">
<td>
<table class="FooterContainer" id="FooterContainer">
<tr>
<td><h1>Page footer</h1></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<SCRIPT>
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body;
var docwidth=window.innerWidth? window.innerWidth-10 : standardbody.clientWidth-10
var docheight=window.innerHeight? window.innerHeight-15 : standardbody.clientHeight-18
function resizeFrame()
{
docwidth=window.innerWidth? window.innerWidth-10 : standardbody.clientWidth-10
docheight=window.innerHeight? window.innerHeight : standardbody.clientHeight
if(docheight < 400) return;
var mainFrameObj = document.getElementById('mainFrame');
var headerRowObj = document.getElementById('HeaderRow');
var footerRowObj = document.getElementById('FooterRow');
if(!mainFrameObj || !headerRowObj || !footerRowObj) return;
var height = headerRowObj.offsetHeight + footerRowObj.offsetHeight;
mainFrameObj.style.height = (docheight - height) + 'px';
//alert(standardbody.offsetWidth + '\n' + standardbody.offsetHeight)
}
function addEvent(target, functionref, tasktype)
{
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
}
setTimeout("resizeFrame()",500);
addEvent(window, resizeFrame,"resize");
</SCRIPT>
</body>
</html>
问候，
尼拉·索尼(Nial Soni)
Regards,
Niral Soni
这篇关于如何获得iframe来填充所有可用空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
