CSS - 如何让子元素高度占满父元素

Question

我只为整个页面设置了100％的高度，但这次我需要在父元素内部使一个元素（div）的高度达到100％。 我曾尝试过为父元素内的100％高度元素重新阅读此内容，但迄今为止什么都没有起作用。 HTML代码如下：

http://peterned.home.xs4all.nl/examples/csslayout1.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 的父元素。

例如：希望灰色框能够顶到上下边界：

- nowayyy

---

抱歉如果你不理解，我写得很快... - nowayyy

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

- yatskevich

Answer 2

我的建议是在你的

上使用float: left，并将你的“Paw for Paw”文本放在另一个

中（我假设这些文本应该在

占据整个左侧高度时位于右侧？）。在我的测试中，min-height: 100%效果很好。此外，你介意告诉我们你用来测试的浏览器是什么吗？还有一件事，由于你在

上使用了padding，并且同时想要一个height: 100%，我认为你需要进行一些margin offset才能得到你想要的结果。

- You Qi

Answer 3

使用background-image或JavaScript。

- John Kurlak

---

这个回答如何解决问题？ - Jared Farrish

如果您在绿色div中放置一个灰色框的背景图像，那么灰色将跨越整个高度。如果使用JavaScript，可以检测绿色框的高度并将灰色框调整为该精确像素高度。 - John Kurlak