如何将图像粘贴到可滚动 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>

ul 有 position:absolute。我试过给箭头position:absolute; bottom: 0;，但这只是把它放在正确的位置，直到你移动滚动条。

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

---

编辑 1：

尝试在图像上使用 position:fixed，但我在菜单的打开和关闭上使用 jquery 的 .slideToggle()，这意味着固定的图像看起来不太好，因为它会弹出和弹出存在而不会与其余内容一起滑入视野。

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>

列表中有height，所以改变你的js中的计算来影响它。 给ul 和overflow: auto 赋予相同的高度。

所以，解释一下我在这里做了什么，你可以注意到滚动的是ul，它位于.list 内部。 img 相对于 .list 而不是 ul 具有 position: absolute。所以当ul滚动时，不会影响img。

Answer 2

如果我猜对了，

...
position:fixed;
...

应该是你要找的。​​p>

你也可以用CSS代替JS来设置UL高度

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>

希望这会有所帮助。