通过iframe搭建后台管理系统右侧内容

首先搭建好iframe框架

<!--iframe main star-->
	<div class="rightmain">
		<div class="right_content">
			<iframe src="http://www.baidu.com" frameborder="0" scrolling="yes" name="main" id="main"></iframe>
		</div>
	</div>
	<!--iframe main end-->

设置样式

.rightmain {
  position: absolute;
  left: 180px;
  top: 60px;
  right: 0;
  bottom: 30px;
  overflow: hidden;
}
.rightmain .right_content {
  height: 100%;
}
.rightmain .right_content iframe {
  width: 100%;
  height: 100%;
}

效果：

点击显示/隐藏菜单如何让iframe进行对应的变化：只需更改left值即可

//显示隐藏左侧导航栏
		$('#link_1').click(function() {
			if( $('#leftmenu').is(':visible') == false){
				$('#leftmenu').css('display','block');
				$(this).children('a').text('隐藏菜单');
				$('.rightmain').css('left','180px');
			}else{
				$('#leftmenu').css('display','none');
				$(this).children('a').text('显示菜单');
				$('.rightmain').css('left','0px');
			}
		})