創建一個匹配底部div的高度和寬度的hover div

Question

所以我有一個基本div和一個hover div（將在鼠標懸停的js上顯示：block）。

無論如何，我有最難的時間，使我的懸停div的高度和寬度匹配我的基礎div的高度和寬度。

我認爲這個問題是因爲我的響應代碼，也是在基本div中，圖像實際上是在另一個背景圖像上，寬度和高度設置爲95％以創建邊框效果。

#user-options li img.role-photo { 
    width: 95%; 
    height: 95%; 
    padding-top: 5px; 
} 

我上傳我的工作提高到一個test link here。

正如你所看到的，在第二張「卡片」上我顯示了hover div。設有'用Facebook登錄'按鈕的不透明白色盒子可以掩蓋下面歌手的圖像。我似乎無法得到它的工作的權利:(

這裏是我的jsfiddle

http://jsfiddle.net/leongaban/PWVBp/

從當前頁面的HTML：

<ul id="user-options"> 
<li> 
    <img class="role-photo" src="../images/registration_fan_tile.png" alt="Fan"/> 

    <h3>Fan</h3> 
    <p>Calling all tastemakers! Influence Hollywood, don't just consume it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</li> 

<li style=""> 
    <div class="role-card-talent" style="position: relative;"> 
     <img class="role-photo" src="../images/registration_talent_tile.png" alt="Talent"/> 

     <!-- Hover Controls --> 
     <div class="hover_controls" style="display:block;"> 

      <a href="#" class="fbLoginBtn"><img class="fb-signin" src="../images/registration_signin_fb.png"></a> 

      <div class="learn_about_pages learnMoreLink" tag="" style="margin:10px"> 
       <a href="#"><img src="../images/registration_info_icon.png">Learn More</a> 
      </div> 
     </div><!-- hover_controls --> 
    </div><!-- role-card-talent --> 

    <h3>Talent</h3> 
    <p>Oh, Hai! Now you are on your way to being "connected." You're welcome. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

</li> 

CSS

#user-options { 
    margin:0px; padding:0px; float:left; width:100%; list-style-type:none; 
} 
#user-options li { 
    position: relative; 
    float:left; 
    width:20%; 
margin: 1%; 
    text-align: center; 
    padding: 5px; 
    background: url("../../images/one_background.png") no-repeat; 
    background-size: 100% auto; 
    overflow: hidden; 
} 
#user-options li img.role-photo { 
    width: 95%; 
    height: 95%; 
    padding-top: 5px; 
} 
.hover_controls { 
    position: absolute; 
    margin: 0; 
    top: 5px; 
    left: -5px; 
    padding: 5px; 
    /*padding-top: 20px;*/ 
    width: 100%; 
    height: auto; 
    /*min-height: */ 
    text-align: center; 
    color: #409ad5; 
    font-size: 0.875em; 
    font-weight: bold; 
    background: rgba(255,255,255,.5); 
    background-size: 100%; 
} 

.hover_controls a { 
    color: #666; 
    font-size: 0.750em; 
} 

.hover_controls img.fb-signin { 
    width: 100%; 
} 

Answer 1

將您的高度設置爲您的css中.hover_controls上的100％。看到的jsfiddle

http://jsfiddle.net/cornelas/PWVBp/3/

.hover_controls { 
position: absolute; 
margin: 0; 
top: 5px; 
left: -5px; 
padding: 5px; 
/*padding-top: 20px;*/ 
width: 100%; 
height: 100%; /** CHANGE TO 100% **/ 
/*min-height: */ 
text-align: center; 
color: #409ad5; 
font-size: 0.875em; 
font-weight: bold; 
background: rgba(255,255,255,.5); 
background-size: 100%; 
} 

Answer 2

只需添加bottom: 5px;您.hover_controls類，所以它看起來像：

.hover_controls { 
    position: absolute; 
    margin: 0; 
    top: 5px; 
    bottom: 5px; 
    left: -5px; 
    padding: 5px; 
    /*padding-top: 20px;*/ 
    width: 100%; 
    height: auto; 
    /*min-height: */ 
    text-align: center; 
    color: #409ad5; 
    font-size: 0.875em; 
    font-weight: bold; 
    background: rgba(255,255,255,.5); 
    background-size: 100%; 
} 

如果設置top和bottom或left和right相對塊內絕對塊，它將以它的底部和頂部線或左右邊界將從p的對應邊x像素的方式伸展其高度/寬度相對的arent DIV

演示：http://jsfiddle.net/PWVBp/5/