如何将图片固定在可滚动DIV的底部可见部分？

Question

我有一个下拉菜单，其中包含大量内容。如果在移动设备上使用此下拉菜单，则用户将需要在 ul 中向下滚动（ul 具有 overflow:scroll）以显示其余内容。这有点不寻常，因此我希望在可见部分的 ul 底部有一个向下箭头。

我只是无法正确地放置它。

我正在使用 JavaScript 将 ul 的高度设置为永远不超过视口高度。我只是按预期在 ul 内滚动，但在某些情况下可能很难看到有更多的菜单内容。

<ul>
  <li>
  <li>
  <li>
  <li>
  <li>
  ...
  <img class="moreContent-arrow"> //Should be at the bottom of the visible part of the ul
</ul>

具有position:absolute。 我尝试给箭头赋予position:absolute; bottom: 0;，但这只会将其放置在正确的位置，直到您移动滚动条。

我一直在寻找答案，但似乎找不到任何不导致我如何将页脚定位在页面底部的搜索词。

---

编辑1：

尝试对图像使用position:fixed，但我正在使用jquery的.slideToggle（）打开和关闭菜单，这意味着固定的图像看起来不好，因为它会在弹出和退出视图时而不是随着其他内容一起滑入视图中。

- NachoDawg

---

你尝试过使用 position: fixed; bottom: 0; 吗？ - Joel Almeida

@JoelAlmeida，我刚试了一下。虽然它让我更接近所需的位置，但菜单会通过jquery滚动打开，使得图片在滚动动画影响下不断出现和消失，这对我来说不够清晰。 - NachoDawg

你尝试过在ul外面放置一个div并将其定位到底部吗？另外，你应该尝试使用 height: 100vh 而不是使用JavaScript计算高度。vh代表视口高度。因此它将始终是视口高度的100％。如果你只想让它成为最大值，则可以使用 max-height: 100vh。 - Joel Almeida

抱歉，我的意思是 .slide()，而不是 .scroll()，并且视口 CSS 似乎与 IE 8 及以下版本不兼容，而我需要它。 - NachoDawg

你能发布一个 jsBin 测试页面吗？或者 Fiddle？或者 CodePen？ - Giacomo Paita

Answer 1

如果您想实现某个目标，请尝试以下方法：

ul {
    position: relative;
    height: 100px;
    overflow: auto;
}

.list {
    background-color:red;
    position: relative;
    height: 100px;
}

img {  
    background-color: green;
    height: 20px;
    width: 20px;
    position: absolute;
    display: block;
    bottom:0px;
 
}

<div class="list">

    <ul>
       <li>
           Stuff
      </li>
      <li>
           More Stuff
      </li>
      <li>
          Even more Stuff
      </li>
      <li>
          Stuff
      </li>
      <li>
          Last but not least, Stuff.
      </li>
      <li>
          Stuff
      </li>
      <li>
          More Stuff
      </li>
      <li>
          Even more Stuff
      </li>
      <li>
          Stuff
      </li>
      <li>
          Last but not least, Stuff.
      </li>
      <li>
          Stuff
      </li>
      <li>
          More Stuff
      </li>
      <li>
          Even more Stuff
      </li>
      <li>
          Stuff
      </li>
      <li>
      Last but not least, Stuff.
      </li>
    </ul>
    <img class="moreContent-arrow">
</div>

列表具有高度，因此请更改您的js计算以影响它。 将相同的高度赋给
和overflow: auto。

因此，要解释我在这里所做的，正如您可以注意到滚动的是ul，它位于.list内部。 img具有相对于.list而不是ul的position: absolute。 因此，当ul滚动时，它不会影响img。

- Joel Almeida

---

是的，你的代码确实给了我预期的菜单行为，但它并没有以我想象中可能的方式解决它。我猜这个问题不能在没有某种“列表”包装器的情况下解决。 - NachoDawg

Answer 2

如果我没记错的话，

...
position:fixed;
...

这应该是你要找的。

你也可以使用 CSS 来设置 UL 的高度，而不是 JS。

- Enrico

---

我需要使用JS来设置它，因为我需要它占据整个高度减去标题栏的高度。$(window).height() - 80;。固定位置不起作用，因为它与jquery .slide()效果不佳。对于我的JS使用，我应该更清楚些，抱歉。 - NachoDawg

Answer 3

我设置了一个JSFiddle。我给图像设置了position:absolute和bottom:0，并使容器position:relative。

编辑：我刚看到你说ul的位置是绝对的。它的位置也可以是绝对的，这也可以工作。

ul {
    background-color:red;
    height: 200px;
    position: relative;
}

img {  
    background-color: green;
    height: 20px;
    width: 20px;
    position: absolute;
    bottom:0px;
 
}

<ul>
  <li>
      Stuff
      </li>
  <li>
      More Stuff
      </li>
  <li>
      Even more Stuff
      </li>
  <li>
      Stuff
      </li>
  <li>
      Last but not least, Stuff.
      </li>
  <img class="moreContent-arrow">
</ul>

希望这能有所帮助。

- Maharkus

---

如果他有滚动条，那么在滚动后，箭头仍会出现在 div 的中间。 - Joel Almeida

是的，您的CSS有效，但它并不是我问题的解决方案。我的UL是一个可滚动的容器，图片需要粘附到UL可见部分的底部，而不仅仅是UL底部。 - NachoDawg