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

Question

I made only 100% of the whole page, but this time I need 100% of the height of the element (div) inside the parent.

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

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 a parent .links

example: you want the gray frame to reach from top to bottom:

Answer 1

Try the following trick:

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

. http://jsfiddle.net/kXfsY/9/ - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

, float: left div.links "Paw for Paw" div ( , div.links, div ?). min-height: 100% . , , ? , div.links, height: 100% , , margin offset, .

Answer 3

Use a background image or javascript.