Question

我与孩子有一个父子div关系，打算作为附加到父母底边的水平滚动条。

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

如何强制滚动条粘贴到父级的下边缘？

这是我目前的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;
}

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

我需要在这里做些什么改变？

谢谢，
道格

Answer 1

我会尝试以下方法：

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

您希望将.horizontal-scrollbar-div的下边缘固定到底边父容器。

注意：您可能不需要z-index属性。

另外：您可能需要最小高度.parent-div。

Answer 2

Marc的回答是正确的，但为了让它起作用，你需要添加＆＃34; position：relative;＆＃34;在＆＃34; .parent-div＆＃34;。否则＆＃34; .horizontal-scrollbar-div＆＃34;将根据body元素而不是＆＃34; .parent-div＆＃34;来定位自己。

我将如何做到这一点。您可以更改父级的高度，滚动条将始终保持在父级div的底部。

＆＃13;

.parent-div {
  position: relative;
  height:200px;
  background-color:#aaa;
}

.horizontal-scrollbar-div {
  position: absolute;
  bottom: 0;
  height:50px;
  width: 100%;
  background-color:yellow;

}

＆＃13;

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

＆＃13;

JS / CSS。如何强制子div到它的父div的底部

2 个答案: