如何将图像粘贴到可滚动的可见部分的底部 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

如果我做对了，

...
position:fixed;
...

应该是你要找的。

您也可以使用CSS设置UL高度而不是JS

Answer 2

我设置了一个 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>

希望这对您有所帮助。

Answer 3

在尝试实现你想要的之后。

试试这个：

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.

如何将图像粘贴到可滚动的可见部分的底部 div

How to stick an image to the bottom of the visible part of a scrollable div

html

css

image

positioning

编辑 1：