根据parent的其他内容影响绝对div的高度

Question

我看到很多关于如何让绝对定位的 child 影响 parent div 的高度的问题，但我不确定如何做相反的事情。我有一个绝对定位的 child，我希望它的高度受其 parent.

的其他内容的影响

HTML:

<div class="timeline">

  <div class="line"></div>

  <div class="item">
    <h1 class="date">January 1, 2017</h1>
    <h1 class="info">Info</h1>
  </div>

</div>

CSS:

.timeline {
    width: 100%;
    margin-top: 65px;
    border: thick orange solid;
}

.line {
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: #a2ff94;
    left: 50%;
    transform: translate(-50%, 0);
}

.item {
    width: 50%;
    border: thin red solid;
}

JSFiddle link

Answer 1

将.timeline 更改为

.timeline {
    width: 100%;
    margin-top: 65px;
    border: thick orange solid;
    position: relative;
}

和.line到

.line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: #a2ff94;
    left: 50%;
    transform: translate(-50%, 0);
}

根据parent的其他内容影响绝对div的高度

Affect absolute div's height based on parent's other content

html

css

css-position

absolute