之前学习时代用的是这种方式：

 现在换成了iframe

最近项目使用的这个结构：还比较满意：

页面结构是这么个类型的

                            这是地一块

|----------------------------------------------------------------| 

|----------------------------------------------------------------|

|---|    |--------------------------------------------------------|

|二 |    |                        这是第三块                                  |

| 块|    |                                                                        |

|---|    |--------------------------------------------------------|

三块结构。

1 :首先我定义了一个头部主要为了很多页面公用的JS css 等等

2 :第一块和第二块html我写在了一个页面 嵌入一个iframe

    这样就构成了我们想要的结构。

该注意的地方：

iframe页面的高度问题。iframe 页面的高度是未知的，如果不处理等高，那么就可能造成有些页面面内容展示不出来。因为他是不会把父页面撑开的。

一下是等高代码和HTML代码

父页面的iframe

iframe子页面的内容

     
    
      
welcome
    
      
       this is the first page
      
    
      
       if you want to get more information
       
    
        
         please move your mouse and click more url
        
       
      
     

 

等高的JS

$('#MainIframe', window.parent.document).height($('.main-wrap').height());//父页面高度 赋值给 子页面iframeWrap.height($('#MainIframe').height());

等于就是让两个div 高度相同。