您的位置：首页 > 其它

左右结构，右边上固定、下iframe，iframe自动改变大小

2013-04-03 10:48 169 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
div{margin:0;padding:0;border:0}
</style>
<body style="margin:0; padding:0; overflow:hidden">

<div style="float:left; width:150px; height:500px; background-color:#060" id="left">
Left
</div>
<div style="float:left; width:400px; background-color:#039" id="right">
<div id="top_header" style="height:150px">Tabs</div>
<div id="iframe_container" style="background-color:#a39">
<iframe src="http://baidu.com" frameborder="0" width="400" height="900" id="ifr1" name="ifr1" scrolling="auto"></iframe>
</div>
</div>

<script language="javascript">
function g(id){
return document.getElementById(id);
}
var left_width = 150;//定义左边部分的宽度
var right_top_height = 150;//定义右边分部顶部tab的高度
var page_min_height = 500;//定义整个页面的最低高度

function resetFrame()
{
try{
var xy = [window.innerWidth,window.innerHeight];
var width = xy[0];
var height = xy[1];
if(width<left_width+300) width=left_width+300;
if(height<page_min_height) height=page_min_height;
var left_obj = g('left');
var right_obj = g('right');
var topheader_obj = g('top_header');
var ifr1_obj = g('ifr1');
var iframe_container_obj = g('iframe_container');
left_obj.style.height = height+"px";
right_obj.style.height = height+"px";
right_obj.style.width = (width-left_width)+"px";

iframe_container.style.width = (width-left_width)+"px";
iframe_container.style.height = (height-right_top_height)+"px";

ifr1_obj.width = width-left_width;
ifr1_obj.height = height-right_top_height;

console.log("width="+width+",height="+height+", right width="+(width-left_width)+",iframe height="+(height-right_top_height));
}catch(e){
alert();
}
}
resetFrame();
window.onresize = resetFrame;
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航