CSS - 如何在父级内部拥有100%的高度元素

Question

我只占了整个页面的100%,但这次我需要父母内部100%高度的元素(div).

我试图在父母内部重新阅读100%高度元素,但到目前为止还没有任何工作.

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 是...的父母 .links

例如:希望灰色框从上到下:

Answer 1

尝试以下技巧:

#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-黑客