CSS - Cách có phần tử chiều cao 100% bên trong của bố mẹ

Question

Tôi chỉ tạo 100% toàn bộ trang, nhưng lần này tôi cần 100% chiều cao của phần tử (div) bên trong của một phụ huynh.

Tôi đã cố gắng đọc lại điều này cho các yếu tố chiều cao 100% bên trong bố mẹ, nhưng không có gì có hiệu quả cho đến nay.

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 là phụ huynh của .links

dụ: muốn hộp màu xám để đạt trên xuống dưới:

Answer 1

Hãy thử mẹo sau:

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

Điều chỉnh các giá trị cho trường hợp của riêng bạn. Hãy xem xét một ví dụ đang http://jsfiddle.net/kXfsY/9/ Ngoài ra đây là một kỹ thuật thú vị giải thích chi tiết - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

Sử dụng hình nền hoặc JavaScript.

Answer 3

Đề xuất của tôi là sử dụng float: left trên div.links của bạn và đặt văn bản "Paw for Paw" trên div khác (tôi giả sử các văn bản này phải ở bên phải của div.links của bạn khi div chiếm toàn bộ chiều cao bên trái?). min-height: 100% hoạt động tốt trong thử nghiệm của tôi. Ngoài ra, bạn có nhớ cho chúng tôi biết bạn đang sử dụng trình duyệt nào cho thử nghiệm không? Một điều nữa, kể từ khi bạn đang sử dụng padding trên div.links và bạn muốn một height: 100% cùng một lúc, tôi nghĩ rằng bạn phải làm một số margin offset để có được kết quả mong muốn của bạn.