首先搭建好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');
			}
		})