星期五, 2017-08-18 15:52 — adminshiping1

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

html:

[html]view plain copy 
 print?
<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底沿对齐）。

来自 http://blog.csdn.net/danzhang1010/article/details/49637005

子元素使用了绝对定位，父元素怎么高度自适应

741137636w | 浏览 8474 次

问题暂时关闭

发布于2016-01-23 08:30最佳答案

父元素高度设置为空或者auto即可，如height:auto或者不要height;，举例如下:
1.高度采用auto;
<div style="height:auto;width:800px;">
     <div style="width:780px;margin:0 auto; height:1000px;">
        这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐；
     </div>
<p>这是父级内容，宽度为800px,高度自适应</p>
</div>
2. 高度不设置；如：
<div style="width:800px;">
     <div style="width:780px;margin:0 auto; height:1000px;">
        这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐；
     </div>
<p>这是父级内容，宽度为800px</p>
</div>

本回答由电脑网络分类达人郭强推荐

1 181

沃优尔

采纳率：67% 擅长：暂未定制

其他回答

子元素使用了绝对定位,父元素还是可以自适应的,但是已经不包含绝对定位的那个子元素了.可以给父元素加上一个 min-height 进行限制,如子元素是500PX高,则父元素为 min-height:500px 这样可以避免父元素高度小于子元素的情况
 本回答被网友采纳
织一点  | 发布于2015-06-19 15:13
评论5 48

子元素设置定位后，父元素最好设置固定的高度，这样可以防止子元素在变换的时候影响到父元素，从而影响到整个页面的布局。

来自 https://zhidao.baidu.com/question/2267951223869595788.html

普通分类:

div+css

You are here

css布局--父级元素高度自适应子元素绝对定位父元素相对定位有大用

子元素使用了绝对定位，父元素怎么高度自适应

其他回答

友情链接

搜索表单

用户登录

You are here

css布局--父级元素高度自适应 子元素绝对定位 父元素相对定位 有大用

子元素使用了绝对定位，父元素怎么高度自适应

其他回答

友情链接

css布局--父级元素高度自适应子元素绝对定位父元素相对定位有大用