css布局--父级元素高度自适应

  在项目中需要实现这样一个布局，子元素相对于父元素绝对定位，其中子元素的高度是确定的，希望父元素能够自适应子元素的高度，实现两个div的底沿对齐。

html:

	
	
	


	

		
顶顶顶顶本部是基础元素的一部分，"mod"是必需内容单元，"grid"内独立或且可复用的功能区块，页面内容的主要承担者

要点：

自定义命名，以mod-为前缀
必须紧接着"grid"/"region"

	

效果如下：

父元素的高度为0，子元素完全脱离了父元素，原因是：绝对定位的元素脱离了文档流，而高度自适应的前提是文档流布局,脱离文档流的子元素是不会参与高度计算的。

后来修改了代码，将子元素的绝对定位，改为相对定位，子元素没有脱离文档流，父元素根据子元素的高度（margin+padding+border+height）来计算自己的高度，但是依旧发现子元素仍由一部分超出在父元素之外，怎么办呢？

后来我试着给父元素加上padding-bottom，值就是子元素相对定位设置的top，例如.c 的top为10px,最后的结果就是可以自适应（两个div底沿对齐）。