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