子元素定位，父元素高度自适应

现象：子元素用了position，脱离文档流，导致父元素没有高度。

解决方案：

1.把子元素改成浮动布局，给父元素加上overflow属性

overflow:auto;

2.在对应的子元素上，添加相同宽高的兄弟元素，该元素去掉position属性，把定位元素的top值换成margin或padding值。

<div id="box">
	<!--定位元素-->
</div>
<div id="box1">
	<!--后添加的元素-->
</div>

#box{
	height: 400px;
	width: 100%;
	position: absolute;
	top: 50px;
	left: 200px;
	background-color: #0066FF;
}
#box1{
	width: 100%;
	height: 400px;
	padding-top: 50px;
}

3.通过js获取子元素的高，动态给父元素设置高度

var father = document.getElementById('father');
var son = document.getElementById('son'); father.style.height=son.offsetHeight+'px';

总结：如果是自己写的结构建议使用第一种方案，如果是别人写的页面并且页面比较复杂，可以使用第三种，第二种方案仅作为了解。