title: Set line-height to a percentage of the screen
body: <p>I have a website which basically consists of 5 list items. Say my body's width and height are 400px. I'd like to be able to spread the items of the list over the full body height (regardless of what the value of body height is). </p>
  
  <p>I was looking into the <code>line-height</code> property, but I can't seem to figure out how to use that properly. If I change the <code>margin</code> property of the <code>li</code> to <code>1em 0;</code>, the list items get spread out a bit. Entering a % value for margin spreads out the list way beyond the screen limit.</p>
  
  <p>How can I spread the list items over the complete screen, regardless of what the height of the screen is?</p>
  
  <p>The HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
          &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen, mobile" /&gt;
  
          &lt;title&gt;Test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;division id="container"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;label id="namelabel"&gt;Naam&lt;/li&gt;
                  &lt;li&gt;&lt;img id="photo" src="" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label id="price"&gt;12.29&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;label id="deltime"&gt;3&lt;/label&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img id="logo" src="x.png"/&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/divion&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS file:</p>
  
  <pre><code>body {
      width: 400px;
      height: 400px;
  }
  
  ul {
      list-style-type: none;
      text-align: center;
  }
  
  li {
  
      margin: 100%;
      margin: 1em 0;
  }
  
  #container {
  }
  
  #logo {
      width: 150px;
      height: 100px;
  }
  </code></pre>