html - JS/CSS。如何强制子 div 到其父 div 的底部

Question

我有一个父子 div 关系，子对象是连接到父对象底部边缘的水平滚动条。

父级是一个垂直可增长/可收缩的容器，用于用户以交互方式添加/删除的矩形 strip 。

如何强制滚动条紧贴父级的底部边缘？

这是我目前的 CSS 情况:

.parent-div {
    position: absolute;
    left: 0;
    top:80px;
    right: 0;
}

.horizontal-scrollbar-div {
    position: absolute;
    top:  0;
    left: 0;
    bottom:-50px;
    height:50px;
    width: 100%;
    z-index: 500;
}

这不能正常工作。在添加运行时 strip 时，滚动条保持在父级的顶部边缘(最初没有水平 strip ，因此父级的高度为 0)。

我需要在此处进行哪些 css 更改？

谢谢，
道格

Answer 1

Marc 的回答是正确的，但为了使其正常工作，您需要添加“position: relative;”在“.parent-div”上。否则，“.horizo​​ntal-scrollbar-div”将根据 body 元素而不是“.parent-div”定位自己。

下面是我的做法。您可以更改父级的高度，滚动条将始终位于父级 div 的底部。

.parent-div {
  position: relative;
  height:200px;
  background-color:#aaa;
}

.horizontal-scrollbar-div {
  position: absolute;
  bottom: 0;
  height:50px;
  width: 100%;
  background-color:yellow;

}

<div class="parent-div">
  <div class="horizontal-scrollbar-div"></div>
</div>