I have a <div>
with a fixed height of 400px in which to display product bullet points using <li>
. If I have 8 <li>
, they fit pretty well in the space given. If I have only 4 <li>
, there is a lot of extra white space below the <li>
. How can I use CSS to make the <li>
space evenly within the <div>
instead of leaving any extra space in the bottom of the <div>
?
I found this question: Evenly distributing or spacing list items vertically 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.