裏面100％鏈接高度

Question

我知道什麼時候使用100% height父母必須擁有的元素100% height。

我想使.overlayheight: 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

Answer 2

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

這裏是demo