title: CSS: space <li> so they are evenly distributed vertically in a <div> of fixed height
body: <p>I have a <code>&lt;div&gt;</code> with a fixed height of 400px in which to display product bullet points using <code>&lt;li&gt;</code>. If I have 8 <code>&lt;li&gt;</code>, they fit pretty well in the space given. If I have only 4 <code>&lt;li&gt;</code>, there is a lot of extra white space below the <code>&lt;li&gt;</code>. How can I use CSS to make the <code>&lt;li&gt;</code> space evenly within the <code>&lt;div&gt;</code> instead of leaving any extra space in the bottom of the <code>&lt;div&gt;</code>?</p>
  
  <p>I found this question:
  <a href="https://stackoverflow.com/questions/14189931/evenly-distributing-or-spacing-list-items-vertically">Evenly distributing or spacing list items vertically</a>
  which seems to be pretty similar but there is no chosen answer and none of the answers really solve the problem. Ideally this would be just CSS not a javascript solution.</p>