如何将图像粘贴到可滚动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：固定在图像上，但我在菜单上的打开和关闭时使用了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而不是position: absolute，.list有ul。因此，当ul滚动时，它不会影响img。

Answer 2

如果我做对了，

...
position:fixed;
...

应该是你想要的。

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

Answer 3

我建立了一个JSFiddle。我为图片提供了position:absolute和bottom:0，然后我制作了容器position:relative。

编辑：我刚看到你说ul的位置是绝对的。它的位置也是绝对的。

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。