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

使用背景圖片或JavaScript。

Answer 3

我的建議是在你的div.links上使用float: left並把你的「Paw for Paw」文本放在另一個div上（我假設這些文本應該在div.links的右邊，當div佔滿身高在左邊？）。 min-height: 100%在我的測試中正常工作。此外，您是否介意告訴我們您正在使用什麼瀏覽器進行測試？還有一件事，因爲您在div.links上使用填充，並且您同時需要height: 100%，所以我認爲您必須執行一些margin offset才能獲得您的願望結果。