将父元素的高度与子元素匹配-相对位置和绝对位置

Question

虽然这看上去很基本，但我无法做到这一点。

简单地说，我有一个父元素-相对位置。然后是子元素-绝对位置。

如果子级的高度大于父级，如何匹配父级的高度。意思是，如何使父级展开。

以下是我所看到的https://jsfiddle.net/wthwawcv/中的js小提琴

<div class="parent">
  dsfsdfsdfsdf<br> 
  hellow .. line 2 <br>
  hello .. line 3
  <div class="child">
    this is the child element to be diaplayed
  </div>
</div>


.parent {
  width:100%;
  background: #ff0000;
  width:200px;
  position: relative;
  overflow: hidden;
}

.child {
  width:40px;
  height:100px;
  background: #ffff00;
  position: absolute;
  right: 0;
  top: 0;
}

Answer 1

与绝对定位不同，您可以使用浮动和清除修补程序：

​

.parent {
  width:100%;
  background: #ff0000;
  width:200px;
  position: relative;
}
.parent:after {
  content: '.';
  color: transparent;
  clear: right;
  overflow: hidden;
  display: block;
  height: 0;
}

.child {
  float: right;
  width:40px;
  background: #ffff00;
}

<div class="parent">
<div class="child">
    this is the child element to be displayed
  </div>
  Child is<br> 
  longer than<br>
  parent content.
</div>
<br>
<div class="parent">
<div class="child">
    child
  </div>
  Child is<br> 
  shorter than<br>
  parent content.
</div>

​

Answer 2

如果您可以使用jquery，那么请在您的文件中添加以下代码，并从子类中删除高度。这是工作小提琴演示

var min_parent_height = jQuery(".child").height()+"px";
console.log(min_parent_height);
jQuery(".parent").css({'min-height':min_parent_height});