Question

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

我想.overlay height: 100%;，但我无法让它发挥作用。

如果我将.col更改为height: 100%，则可以正常运行，但我不希望.col为100％。

这周围有吗？我注意到我是否提供了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

Answer 2

您需要将position: relative添加到<a />，将position: absolute; width:100%;height:100%添加到.overly

这是demo

内部div 100％高度的链接

2 个答案: