title: How to stick an image to the bottom of the visible part of a scrollable div
body: <p>I have a drop-down menu that has a lot of content. If this dropdown is used on a mobile device, the user will be required to scroll down inside the <code>ul</code> (the <code>ul</code> has <code>overflow:scroll</code>) to reveal the rest of the content. This is somewhat unusual, so I want a downwards-pointing arrow on the bottom of the visible part of the <code>ul</code>.</p>
  
  <p>I just cant seem to place it correctly. </p>
  
  <p>I'm using javascript to set the height of the <code>ul</code> to never exceed the viewport height. I'm just scrolling inside the <code>ul</code> as intended, but it can be hard to that there's more menu-content in some cases.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
    &lt;li&gt;
    &lt;li&gt;
    &lt;li&gt;
    &lt;li&gt;
    ...
    &lt;img class="moreContent-arrow"&gt; //Should be at the bottom of the visible part of the ul
  &lt;/ul&gt;
  </code></pre>
  
  <p>The <code>ul</code> has <code>position:absolute</code>. I've tried giving the arrow <code>position:absolute; bottom: 0;</code>, but that just puts it  in the correct position until you move the scrollbar.</p>
  
  <p>I've been searching for an answer but I cant seem to find any searchwords that doesn't lead me to how to position a footer to the bottom of the page.</p>
  
  <hr>
  
  <h2>EDIT 1:</h2>
  
  <p>Tried to use position:fixed on the image, but I'm using jquery's .slideToggle() on the opening and closing on the menu, meaning that the image which is fixed wont look good, as it pops in and out of existence without sliding into view with the rest of the content.</p>