title: What is a good solution to fixed positioned html divs on small screens?
body: <p>I have a fixed position div on the right side of an HTML page I am building. This div is meant to be sticky as the page is scrolled. The problem is that on smaller screens some of the content is hidden because it does not entirely fit on the page (example: <a href="http://jsfiddle.net/uJN4Q/" rel="nofollow">http://jsfiddle.net/uJN4Q/</a>).</p>
  
  <p>I attempted to fix this problem by putting the content in a <code>div</code> inside the container <code>div</code>, setting the container <code>div</code> to have a <code>bottom</code> value, setting the inner div to 100% the height of the container div, and setting <code>overflow: auto</code> on the inner div. The problem with this solution is that on bigger screens there is then large amounts of ugly whitespace at the bottom of the inner div.</p>
  
  <p>Any ideas how to make it so that the entirety of the text can be seen, the div is still <code>position: fixed</code>, and the bottom of the div 'sticks' to the last line of text so there is no whitespace at the bottom of the div?</p>