以前后台布局都是用的iframe配合js来对后台进行布局，使用iframe框架对后台布局有很多优势，例如这个标签是符合w3c标准的标签，不会存在兼容性问题，然后相对于其他的iframe给你视觉上的整体度更高，下来面就发下我常用的后台布局代码吧，是iframe的方式

html代码：

<a href="javascript:;" data-href="/new">文章</a>
<div class="layui-body">    
    <iframe src="/show" frameborder="0" id="MianGMP" style="width: 100%; min-height: 580px;"></iframe>    
</div>

js代码：

$('.layui-nav-item').on('click', 'a', function(){    
    var href = $(this).attr('data-href');    
    if(href){    
        $('#MianGMP').attr('src', href);    
    }    
    $('#MianGMP').load(function(){    
        var frameHeight = $('#MianGMP').contents().find("html").height() + 20;    
        $('#MianGMP').css('height', frameHeight + 'px');    
    });    
});

好了，上面就是以前的布局方式，没有什么特别的地方，主要就是在iframe载入进入了以后使用load方式把框架高度调整下，加20px

接下来我们看看ajax的后台布局方式代码

html代码：

<a href="javascript:;" data-code="new">文章</a>
<div class="content"></div>

js代码：

$('.layui-nav-item').on('click', 'a', function(){
    var code = $(this).attr('data-code');
    $.ajax({
        url:code+'.html',
        type:'GET'
        data:{code:code},
        dataType:'html',
        success:function(data){
            $('#content').html(data);
        }
    });
});