CSS - Cómo tener un elemento de 100% de altura dentro del elemento primario

Question

Solo he realizado el 100% de toda la página, pero esta vez necesito una altura del elemento de 100% (div) dentro de un elemento primario.

Traté de volver a leer esto para elementos de 100% de altura dentro de los padres, pero nada ha funcionado hasta ahora.

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 es el padre de .links

ejemplo: desea que el cuadro gris para llegar arriba a abajo:

Answer 1

Prueba el siguiente truco:

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

ajustar los valores de su propio caso. Echa un vistazo a un código de ejemplo http://jsfiddle.net/kXfsY/9/ También aquí es una técnica interesante explicada con detalle - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

Utilice una imagen de fondo o JavaScript.

Answer 3

Mi sugerencia es usar float: left en sus enlaces div y poner sus textos de "Paw for Paw" en otro div (supongo que estos textos deben estar a la derecha de sus enlaces div cuando el div ocupa el completo altura a la izquierda?). El min-height: 100% funciona bien en mi prueba. Además, ¿quieres decirnos qué navegador estás utilizando para la prueba? Una cosa más, ya que está utilizando relleno en div.links y quería un height: 100% al mismo tiempo, creo que tiene que hacer un poco de margin offset para obtener el resultado deseado.