如何使用具有“position：fixed”元素的代码段中的代码？ 我无法让它留在我的内心 <div> 身高（父母）

Question

我正在尝试使用此代码段（链接原始代码）： https ： //codepen.io/starkxx/pen/NdemEv

这里是用一些内容编辑的片段（POC的容器，删除了一些代码）：

https://codepen.io/Demky/pen/EzNLVB

我没有找到一个解决方案，在新父母身高的范围内包含干包装 ; 我认为问题来自这段代码，但我找不到解决方案

<div class="stem-wrapper">
    <div class="stem"></div>
    <div class="stem-background"></div>
</div>

如果我试图给他一个位置，固定的干包装总是占据整个窗户的高度或消失：绝对/相对/ ......

.stem-wrapper {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 50%;
}

我不允许为'top'设置一个静态值，因为我不知道该片段距离顶部有多远

我试过的：

• 我试图建立一个父母，所以我可以在父母身上使用position：relative并添加位置：我在这里看到的绝对值： https ：//stackoverflow.com/a/20994123/9552861但是我无法使其工作
• 试图玩位置/容器，徒劳无功
• 我也尝试使用javascript，但我没有取得任何进展

您能否向我提供有关如何找到解决方案的提示？

是否确定问题来自CSS？

我是否应该继续尝试将此固定元素转换为父元素 （position：relative）/ Child（position：absolute）关系; 或者我没有朝正确的方向看？

如果我需要在我的问题上添加更多信息，请告诉我。 我在codepen上使用css / html代码以获得更好的可见性，但如果它对读者更好，我可以将其粘贴在此处。

问题的屏幕截图：

问题的屏幕截图时，我的片段导出到另一个网站（ 茎-取整页）

编辑：试图让问题更容易理解;

在修改后的代码段（ 此链接从顶部 ）：

• 我添加了一个容器（#timelineContainer， 背景颜色：黄色 ）;

• 我希望“.steam-wrapper”和他的孩子（.stem，.stem-background）不会走出黄色区域（用正确的颜色更新截图）。

目标是将此POC / Snippet包含到容器中 所以它可以在这个沙箱之外工作而不占用整页的高度

Answer 1

如果我明白你想要什么，你需要做的是：

body {
    background: @body-background;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #B9CFD0;
    font-family: 'Roboto Slab', serif;
    /*overflow-x: hidden;
    overflow-y: scroll;*/
    overflow: hidden;
}
#timelineContainer {
    overflow: auto;
    height: 60%; /*any height you want the snippet to have*/
}
.container {
    height: 40%;
}

然后你必须调整一下干：

.stem-wrapper {
    position: fixed;
    top: 40%;
    bottom: 0px;
    left: calc(50% - 8px);
    max-height: 60%;
}

之后，您将不得不调整JS以适应新的布局。 因为滚动功能与正文有关，现在应该与#timelineContainer相关