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

最新推荐文章于 2021-07-03 22:58:51 发布

leinchu

最新推荐文章于 2021-07-03 22:58:51 发布

阅读量2.4k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/leinchu/article/details/8754811

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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>

leinchu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
左右结构，右边上固定、下iframe，iframe自动改变大小

无标题文档div{margin:0;padding:0;border:0}Left Tabs function g(id){ return document.getElementById(id);}var left_width = 150;//定义左边部分的宽度var right_top_height = 150;//
复制链接

扫一扫