欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

html:

 

[html] view plain copy
 
 print?
  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <title>Document</title>  
  4.     <style>  
  5.         .p{  
  6.             background: yellow;  
  7.             border: 1px solid green;  
  8.             position: relative;  
  9.   
  10.         }  
  11.         .c{  
  12.             position: absolute;  
  13.             left: 10px;  
  14.             top:10px;  
  15.             background: red;  
  16.             width: 100px;  
  17.             height: 100px;  
  18.               
  19.         }  
  20.     </style>  
  21. </head>  
  22. <body>  
  23.     <div class="p">  
  24.         <div class="c">顶顶顶顶本部是基础元素的一部分,"mod"是必需内容单元,"grid"内独立或且可复用的功能区块,页面内容的主要承担者  
  25.   
  26. 要点:  
  27.   
  28. 自定义命名,以mod-为前缀  
  29. 必须紧接着"grid"/"region"  
  30. </div>  
  31.     </div>  
  32. </body>  

效果如下:

 

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

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

 

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

 

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

 
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>
 

沃优尔 

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

其他回答

子元素使用了绝对定位,父元素还是可以自适应的,但是已经不包含绝对定位的那个子元素了.可以给父元素加上一个 min-height 进行限制,如子元素是500PX高,则父元素为 min-height:500px 这样可以避免父元素高度小于子元素的情况
 本回答被网友采纳
织一点  | 发布于2015-06-19 15:13
评论 
5 48
子元素设置定位后,父元素最好设置固定的高度,这样可以防止子元素在变换的时候影响到父元素,从而影响到整个页面的布局。
来自 https://zhidao.baidu.com/question/2267951223869595788.html
普通分类: