Đặt chiều cao của liên kết thành 100% là số

Question

Nếu tôi có phân chia với height: 100px; và nó chứa liên kết bên trong - tôi có thể tạo liên kết lấp đầy chiều cao của bộ phận mà không mã hóa cứng giá trị không?

<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/

Answer 1

Add:

display: block; 
height: 100%; 

Mặc dù tôi không biết nếu bạn quan tâm vào liên kết kéo dài chiều rộng của <div>

Nếu bạn chỉ cần đặt <a> để display: inline-block;

jsFiddle

Answer 2

yếu tố Khối sẽ mở rộng để điền vào container của họ, xác định chiều cao như 100% sẽ gây ra nó sẽ tăng lên chiều cao của mẹ.

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

làm việc Ví dụ:http://jsfiddle.net/h42bD/

Answer 3

Có .. có thể, chỉ khi bạn thiết lập hiển thị của nó để chặn

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

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

Như bạn có thể thấy, nền lấp đầy với màu xanh lá cây thay vì đỏ .. nó chứng minh chiều cao được thiết lập thực sự