css - 将链接高度设置为其父级的 100%

Question

如果我有除法height: 100px;并且其中包含一个链接 - 我可以让链接填充除法的高度而不对值进行硬编码吗？

<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? */
}

小提琴：http: //jsfiddle.net/nPL65/

Answer 1

添加：

display: block;
height: 100%;

虽然我不知道你是否介意链接跨越<div>

如果你只是设置<a>为display: inline-block;

jsFiddle

Answer 2

是的..只有当您将其显示设置为阻止时才有可能

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

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

如您所见，背景填充为绿色而不是红色..它证明高度实际上是设置的

Answer 3

块元素将扩展以填充其容器，将高度指定为 100% 将使其增加到其父级的高度。

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

工作示例：http: //jsfiddle.net/h42bD/