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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -