仿百度手机端，网页嵌套网页高度自适应

网页嵌套网页高度自适应内页高度！

主页html：

    
     



   

	 

		 

		 
		 
	 

	 

	  
	  百度一下
	 

	 

		  

			
自定义0
			
自定义1
			
自定义2
			
自定义3
		  
	  
	  
	

		

		

		

		

    
	
   




	

		
1
11
		
2
22
		
3
33
		
4
44
		
5
55
		
6
66
	




	
工具01
	
工具02
	
工具03
	
工具04

主页js：

主页样式style：

html{overflow:hidden;}
	* {margin: 0;padding: 0;}
	body{
	text-align: center;
	}
	#soso{
    position: relative;
    clear: both;
    margin-left: .17rem;
    margin-right: .17rem;
    background: #fff;
    height: 40px;
    border: 1px solid #363636;
    box-sizing: content-box;
    width: 92%;
	margin: 0 auto;
	}
	input {
    display: block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    padding: 6px 42px 6px 5px;
    height: 40px;
    line-height: 30px;
    margin: 0;
    font-size: 18px;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    color: #333;
    resize: none;
    overflow: hidden;
    font-family: Arial,Helvetica,sans-serif;
    outline: 0;
	}
	button, input {
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
	}
	.se-bn {
    display: block;
    color: #38f;
    text-align: center;
    width: 82px;
    height: 40px;
    border-left: 1px solid #e8e8e8;
    letter-spacing: -1px;
    box-sizing: border-box;
    outline: 0;
	float: right;
	}
	.se-bn span {
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
	}
	#nav{
     white-space: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: .17rem;
    padding-right: .17rem;
    height: 39px;
	}
	#nav ul{
	width:93%;
	margin:0 auto;
	}
	#nav ul li{
	padding: 0 .14rem;
    display: block;
    text-align: center;
    line-height: 40px;
    height: 39px;
	box-sizing: border-box;
	float: left;
	margin-right: 12px;
	font-weight:600;
	color:#fff;
	}

	input{
	height: 100%;
	width: 65%;
	float: left;
	}
	.logo {
    height: 62px;
	}
	.logo p{
    background: url(//m.baidu.com/se//static/img/iphone/logo_white_web.png) no-repeat;
    -webkit-background-size: 101px 31px;
    background-size: 101px 31px;
    background-position: center 7px;
	width: 163px;
    height: 46px;
    display: inline-block;
    margin: 8px 0;
	}
	.logo p img{
    padding-top: 0;
    max-height: 46px;
    max-width: 163px;
	}

	#in_box{
	background-image: url(9.jpg); 
	background-size: cover;
    background-repeat: no-repeat;
	}

	#Kbai{
	min-width: 350px;
	min-height: 380px;
	margin: 0 auto;
	}
    #arc_box{
    position: relative;
	margin: 0 -.17rem;
	height: 115px;
	background:
	#fff;
	}
	#arc_box ul li{
    width: 30%;
	height: 55px;
	float: left;
	list-style-type: none;
	}

    .t1{
	font-size: 1.5em;
	color:#000;
	font-weight:350;
    }
    .t2{
	color: #999;
	padding-top: .02rem;
    font-size: 12px;
    line-height: 22px;
    }
	#tool{
	width: 100%;
	height: 130px;
	background:
	#fff;
	margin-top: 10px;
    }
	#in_box2{
	background: #e8e8e8;
	}
	#tool ul li{
	height: 30px;
	width: 40%;
	list-style-type: none;
	float: left;
	margin: 10px;
	}

到这里才是关键的一部，主页应该看得到引用了pym.js，
其实子页也引用了。
pym.js有三个文件：

一个jq库，两个子页面引入文件（主页读取子页面的高度传参给主页面）
方法去官网及论坛有相关教程！
不想看教程就按最笨的方法引用(单页也是一样)：
主页—分析：
html+js

		

		

		

		

//下面这段js代码“j”代表的是div的索引，inload_html 是网页的地址字符串变量，具体看index js的代码。		
pymParent=new pym.Parent('example-'+j, inload_html, {});

子页面：

这样自己建立要嵌入的子页面，并加载这三个js，结合以上主页内容百度的主体界面基础实现；