title: 100% line height text in scaleable div
body: <p>I need to create a menu inside of a div that scales with the browser window. The text size adjusts depending on the size of the window (using fittext.js) and the outer DIV is always 15% of the height of the window. Since 100% line height doesn't work, what other options are there.</p>
  
  <p>Also while I'm here what could be done to make the text links span 100% of the width of the containing DIV? (equal spacing between so the links cover the entire div)</p>
  
  <p>jQuery options are fine if needed.</p>
  
  <p><a href="http://jsfiddle.net/brettlewis/CTAAA/" rel="nofollow noreferrer">Here is a fiddle I made with an example of my code</a></p>
  
  <p>HTML source</p>
  
  <pre><code>&lt;nav id="navigation"&gt;
  &lt;a href="#welcome" class="nav_button"&gt;&lt;span&gt;Welcome&lt;/span&gt;&lt;/a&gt;
  &lt;a href="#about" class="nav_button"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;
  &lt;a href="#work" class="nav_button"&gt;&lt;span&gt;Work&lt;/span&gt;&lt;/a&gt;
  &lt;a href="#contact" class="nav_button"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;    
  &lt;/nav&gt;​
  </code></pre>
  
  <p>CSS source</p>
  
  <pre><code>#navigation {
  width: 80%;
  height: 15%;
  position: fixed;
  top: 5%;
  left: 10%;
  background: #ccc;
  }
  .nav_button {
  height: 100%;
  width: 20%;
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: 100%;
  }
  </code></pre>
  
  <p>​</p>