在项目中需要实现这样一个布局，子元素相对于父元素绝对定位，其中子元素的高度是确定的，希望父元素能够自适应子元素的高度，实现两个div的底沿对齐。
html:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p{
background: yellow;
border: 1px solid green;
position: relative;
}
.c{
position: absolute;
left: 10px;
top:10px;
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="p">
<div class="c">顶顶顶顶本部是基础元素的一部分，"mod"是必需内容单元，"grid"内独立或且可复用的功能区块，页面内容的主要承担者
要点：
自定义命名，以mod-为前缀
必须紧接着"grid"/"region"
</div>
</div>
</body>
效果如下：
父元素的高度为0，子元素完全脱离了父元素，原因是：绝对定位的元素脱离了文档流，而高度自适应的前提是文档流布局,脱离文档流的子元素是不会参与高度计算的。
后来修改了代码，将子元素的绝对定位，改为相对定位，子元素没有脱离文档流，父元素根据子元素的高度（margin+padding+border+height）来计算自己的高度，但是依旧发现子元素仍由一部分超出在父元素之外，怎么办呢？
后来我试着给父元素加上padding-bottom，值就是子元素相对定位设置的top，例如.c 的top为10px,最后的结果就是可以自适应（两个div底沿对齐）。
扫一扫
1488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
