html - 内部 div 100% 链接高度

Question

我知道在使用 100% height 时，父元素必须有 100% height。

我想制作 .overlay height: 100%; 但我无法让它工作。

如果我将 .col 更改为 height: 100% 它可以工作，但我不希望 .col 为 100%。

http://jsfiddle.net/8HfjV/

这附近有什么吗？我注意到如果我给 a 标签 display:block 和 height: 100%; 是有效的。那么有没有办法为 DIV 做到这一点？

HTML:

<div class="col col1">
    <a href="#">
        <div class="overlay"></div>            
        <img src="#">
    </a>
</div>

CSS:

html, body {
    height: 100%;
}

.col {
    float: left;
    display: block;
    Position: relative;
}

.col a {
    display: block;
    height: 100%;
}

.col img {
    width: 100%;
    display: block;
    height: auto;
}

.overlay {
    height: 100%;
    background: #000;
    z-index: 1;
    display: block;
}

.col1 {
    width: 25%;
}

Answer 1

既然类名是 overlay 我相信你希望它与 img 重叠？

如果是这样，请使用 position: absolute;。您的 div 设置为 height: 100%; 但其 width 为 0 因此将其更改为 100%好吧。

Demo