html - Inside div 100% height of link -
html - Inside div 100% height of link -
i know when using 100% height elements parents must have 100% height.
i want  create .overlay height: 100%; can't work. 
if  alter .col height: 100% works don't want .col 100%.
http://jsfiddle.net/8hfjv/
is there anyway around this? noticed if give a tag display:block , height: 100%; works. there way 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 {     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%; }       
since class name overlay believe want overlap img?
if  utilize position: absolute;. div set height: 100%; width 0  alter 100% well.
demo
 html css css3 
 
Comments
Post a Comment