title: CSS display: table-row set height
body: <p>I would like to set a specific height in a percentage value. But the display: table-cell doesn't want to set any height.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="navigation"&gt;
          &lt;div class="title"&gt;Titel&lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#navigation{
      display: table;
      width: 15%;
      height: 100%;
      padding-top: 6%;
      background-color: silver;
  }
  .title{
      display: table-row;
      width: 100%;
      height: 5%;
      background-color: lime;
  }
  #navigation ul li{
      display: table-row;
      width: 100%;
      height: 5%;
  }
  #navigation ul li a{
      display: table-cell;
      width: 100%;
      height: 5%;
      background-color: olive;
  }
  </code></pre>
  
  <p>For further information please have a look at my <a href="http://jsfiddle.net/hc5cm620/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>Thank you very much!</p>