title: Show li elements in div while height is less than another div
body: <p>I have two divs with <code>id=left</code> and <code>id=right</code>. The div with <code>id=left</code> contains some <code>li</code> elements (a list with bullets) and it is floated left. The div with <code>id=right</code> contains some text and html (any type of content). The problem is sometimes the left sided div (<code>id=left</code>) is bigger than <code>id=right</code> or vice versa. I want only to show, for example 10 <code>li</code>s on the page and then when user scroll to show another <code>li</code>s on the page while the height of <code>left</code> is less than or equal to the height of <code>right</code>.</p>
  
  <p>A descriptive image of the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/XkXeR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XkXeR.png" alt="Want to show only some li elements from left box to have the same size with right box."></a></p>
  
  <p><strong>EDIT:</strong>
  I can retreive from server a list of 1000 lis and use display: none and on scroll <code>display: block</code>. <strong>I don't want to load dinamically from the server the <code>li</code>s.</strong> </p>
  
  <p>Width: #left is <code>250px</code> #right is <code>750px</code>.</p>