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