您的位置：首页 > Web前端 > CSS

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

2015-11-04 13:53 531 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航