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-hacks

Answer 2

我的建议是在你的div.links上使用float: left并将你的“Paw for Paw”文本放在另一个div上（我假设这些文本应该在你的div.links右侧时div占据了左边的全高？）。 min-height: 100%在我的测试中运行正常。此外，您是否介意告诉我们您使用哪种浏览器进行测试？还有一件事，因为你在div.links上使用填充而你想同时使用height: 100%，我认为你必须做一些margin offset来获得你想要的结果。

Answer 3

使用背景图片或JavaScript。