CSS - How to have 100% height element inside of parent

Question

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.

I tried to re-read this for 100% height elements inside of parents, but nothing has worked so far.

http://peterned.home.xs4all.nl/examples/csslayout1.html

HTML:

<div class="links content">
  <ul>
      <li>
        <h3> News </h3>
        <ul>
          <li><a href="#">Adoption Stories</a></li>
          <li><a href="#">Shelter News</a></li>
          <li><a href="#">Paw For Paw</a></li>
        </ul>
      </li>
      <li>
        <h3> Resources </h3>
        <ul>
          <li><a href="#">Breed Info</a></li>
          <li><a href="#">Dog Care</a></li>
        </ul>
      </li>
      <li>
        <h3> Save a Paw </h3>
        <ul>
          <li><a href="#">Adopt</a></li>
          <li><a href="#">Donate</a></li>
          <li><a href="#">Volunteer</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- .links -->

CSS:

#main-content {
  background: #a8bfa5;
}

.links {
  background: #d4d7d8;
  padding: 10px;
  width: 190px;
  min-height: 100%;
}

.links ul {
  padding: 5px;
}

.links ul li {
  padding: 5px;
}

#main-content is the parent of .links

example: want the gray box to reach top to bottom:

Answer 1

Try the following trick:

#main-content {
   overflow: hidden;
}
.links {
   padding-bottom: 1000px;
   margin-bottom: -1000px;
}

Adjust the values for your own case. Take a look at an example code http://jsfiddle.net/kXfsY/9/ Also here is one interesting technique explained in detail - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks