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

This question already has answers here:

Auto height on parent container with Absolute/Fixed Children
                                
                                    （8个答案）
                                
                        
                                3年前关闭。
            
                    
尽管看起来很基本，但我无法使它正常工作。

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

如果孩子的身高比父母的身高大，我该如何匹配父母的身高。含义，如何使父级扩展。

这是我正在看的js小提琴
https://jsfiddle.net/wthwawcv/

<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;
}

最佳答案

除了绝对定位，您还可以使用float和clearfix hack：

.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>

关于html - 使父元素的高度与子元素匹配-相对位置和绝对位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36690039/