title: CSS: Position Dynamically Sized div to Bottom of Static Div
body: <p>I'm adding chat functionality to my WebSocket based web app. In conventional chat windows, the eldest message is at the top of the window and the newest at the bottom. <img src="https://i.stack.imgur.com/bhry4.png" alt="Conventional chat"></p>
  
  <p>My implementation should share this typical, top to bottom element order. However, in conventional chat windows, the eldest message sticks to the top of the frame. My implementation should have the youngest message sticking to the bottom of the frame. From what I've seen of my son playing it, Minecraft has this ideal chat interface. In truth, the Minecraft chat interface appears to resemble exactly what I want to implement.<img src="https://i.stack.imgur.com/NadBP.png" alt="Ideal chat"></p>
  
  <p>How, in CSS, can I make chat messages stick to the bottom of their window?</p>
  
  <p>This would be easy if <code>calc()</code> offered a means to refer to the current height of the element it is being applied to, as I could do something like</p>
  
  <pre><code>position: relative;
  top: calc(240px - [current element height]);
  </code></pre>
  
  <p>where 240px is the static height of the chat window.</p>
  
  <p>Thanks in advance.</p>