Question

我们假设我有一个overflow:auto的div和一个滚动条。我想添加一个div，当你向下滚动时占用整个父div，而不仅仅是父div在屏幕上呈现的高度。

如果我的描述有点不清楚，请查看下面的代码和jsfiddle。当您向下滚动父级时，我希望红色列一直延伸到父级的底部。你不应该能够看到红色框的底部。

我该怎么做呢？

＆＃13;

.parent {
  overflow: auto;
  overflow-x: hidden;
  position: relative;
  height: 300px;
  width: 200px;
  border: 1px solid black;
}
.line {
  border-bottom: 1.5px solid black;
  height: 50px;
  margin-left: 7px;
  margin-right: 7px;
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: red;
  width: 50%;
  left: 20%;
  z-index: 10;
}

＆＃13;

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

＆＃13;

Answer 1

可能与以下问题和答案重复。

Position: absolute and parent height?

你只能用JavaScript来做，因为绝对元素完全没有文档流，它只能与父元素对齐。

如下所示添加两行js以使其按预期工作。

var scrollParentHeight = document.getElementsByClassName('parent')[0].scrollHeight
document.getElementsByClassName('box')[0].style.height = scrollParentHeight + 'px';

使div的高度为父亲高度的100％，包括溢出

1 个答案: