2013-03-10 17 views
6

Se ho una divisione con height: 100px; e contiene un collegamento all'interno - posso fare il collegamento riempire l'altezza della divisione senza codificare il valore?Imposta l'altezza del collegamento al 100% del suo genitore

<div><a href="#">hello</a></div>

div { 
    height: 100px; 
    width: 100px; 
    background: red; 
} 

a { 
    background: green; 
    height: 100%; /* This does not work. Is it possible to set this height to 100% of container? */ 
} 

Fiddle: http://jsfiddle.net/nPL65/

risposta

15

Add:

display: block; 
height: 100%; 

Anche se non so se si mente il collegamento che attraversa la larghezza della <div>

Se basta impostare lo <a> a display: inline-block;

jsFiddle

+0

Se vuoi riempire l'intero div, cambialo in 'min-height: 100%' –

2

elementi di blocco si espanderà per riempire il contenitore, specificando come 100% provoca l'aumentare all'altezza del suo genitore.

a { 
    background: green; 
    display: block; 
    height: 100%; 
} 

di lavoro Esempio:http://jsfiddle.net/h42bD/

3

sì .. è possibile, solo quando si imposta il suo display per bloccare

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

a{ 
    display: block; 
    height:100%; 
    background: green; 
} 

Come si può vedere, lo sfondo si riempie di verde invece rosso .. dimostra che l'altezza sta effettivamente impostando

Problemi correlati