<!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>
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240826070647288-243310440.jpg)