如何使相对位置匹配子元素高度的包装div元素？ [英] How to make the wrapping div element with relative position match child elements height?

问题描述

我有一个简单的问题，我有2个div，1个是相对定位的。子元素是绝对定位的。

HTML

 < div id =wrap>< div id =inner>< / div>< / div> 
  

CSS

  #wrap {
 width：100％; 
背景：#ccc; 
职位：亲属; 
 min-height：20px; 
} 
 
 #inner {
 width：30％; 
背景：＃000; 
位置：绝对; 
 right：0; 
 top：0; 
 height：200px; 
} 
  

我遇到的问题是#wrap元素无法调整其高度以匹配子元素，因此子元素挂在父元素的边缘之外。这可以通过相对和绝对定位的元素来完成吗？我知道这可以通过浮动元素来实现，然后用css =>清除它们：两者都可以，但是我会想知道这个方法是否可行。

我创建了一个 jsfiddle这个问题在这里 如果有人想帮助我！

非常感谢。

解决方案

绝对定位元素超出流量范围，所以父母无法调整其高度。

但您可以简单地使用：

  #wrap {
 width：100％; / *无用* / 
背景：#ccc; 
 overflow：hidden; / *建立一个新的格式化上下文* / 
 min-height：20px; 
} 
 
 #inner {
 width：30％; 
背景：＃000; 
 float：right; 
} 
  

I have a simple problem where I have 2 divs, 1 is relative positioned. The child element is absolute positioned. This child has varying height.

The code so far:

HTML

<div id="wrap"><div id="inner"></div></div>

CSS

#wrap {
    width: 100%;
    background: #ccc;
    position: relative;
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    position: absolute;
    right: 0;
    top: 0;
    height: 200px;
}

The problem I have is that the #wrap element doesn't adjust its height to match the child element and therefor the child element hangs outside the edge of the parent. Can this be done with relative and absolute positioned elements?

I know this can be achieved with floating elements and following them with css => cleared: both, but I'd like to know if its possible with this method.

I've created a jsfiddle of this problem over here if anybody would like to help me out!

Thanks a lot.

解决方案

Absolute positionned elements are outside the flow so parents can't adjust their height.

But you can simply use:

#wrap {
    width: 100%; /* useless */
    background: #ccc;
    overflow:hidden; /* establish a new formatting context */
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    float:right;
}

这篇关于如何使相对位置匹配子元素高度的包装div元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！