title: CSS - How to have 100% height element inside of parent
body: <p>I have only made a 100% of the whole page, but this time I need a 100% height of element (div) inside of a parent. </p>
  
  <p>I tried to re-read this for 100% height elements inside of parents, but nothing has worked so far.</p>
  
  <p><a href="http://peterned.home.xs4all.nl/examples/csslayout1.html" rel="noreferrer">http://peterned.home.xs4all.nl/examples/csslayout1.html</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="links content"&gt;
    &lt;ul&gt;
        &lt;li&gt;
          &lt;h3&gt; News &lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Adoption Stories&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Shelter News&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Paw For Paw&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;h3&gt; Resources &lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Breed Info&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Dog Care&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;h3&gt; Save a Paw &lt;/h3&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Adopt&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Volunteer&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- .links --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main-content {
    background: #a8bfa5;
  }
  
  .links {
    background: #d4d7d8;
    padding: 10px;
    width: 190px;
    min-height: 100%;
  }
  
  .links ul {
    padding: 5px;
  }
  
  .links ul li {
    padding: 5px;
  }
  </code></pre>
  
  <p><code>#main-content</code> is the parent of <code>.links</code></p>
  
  <p>example: want the gray box to reach top to bottom:</p>
  
  <p><img src="https://i.stack.imgur.com/NIh5e.png" alt="enter image description here"></p>