title: Limit height with distance from page bottom
body: <p>I have a webapp with buttons on one side. When I click one of these buttons, *JavaScript magic*, a menu appears next to it. The script knows nothing about positioning or style, it just finds a target element then writes HTML inside.</p>
  
  <p>In short, I have a menu positioned relatively to its parent (<code>#pretty-target</code> in this example).</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;button class="my-pretty-button"&gt;@&lt;/button&gt;
      &lt;div class="menu-target" id="pretty-target"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The result looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/bJ31P.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bJ31P.png" alt="A floating menu next to a button"></a></p>
  
  <p>Now, when I reduce the page height, I would like to limit the height of this menu, depending on its distance from the bottom of the page. A more-than-ideal result would look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/tQaDe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tQaDe.png" alt="The same menu but with its height magically limited"></a></p>
  
  <p>I know the very best practice would be to have a scrollable page body and don't bother about the height of such elements. However, my page body is a map, so any attempt to scroll it would just move the map.</p>
  
  <p>I could certainly craft some alternative thing by using a scrollable overlay, or, even better, by using media queries to choose a better method for displaying these menus. But then, they wouldn't be displayed this way.</p>
  
  <p>Briefly: I have a page-independent div, and I want it to be height-limited by the page height. How could this work (without using JS)?</p>