I'm trying to get an
<a href > link fill the vertical height on a div that is set up in table-cell display.
The height might vary so setting padding is not an option (this might be my fall-back but will restrict the final solution).
I want it to do the equivalent of
height:100% but that does not work as can be seen in this example:
<a href="http://jsfiddle.net/VmcXh/1/" rel="nofollow">http://jsfiddle.net/VmcXh/1/</a>
The result I want is for the link to fill the 'cell', both so that the background color can change as a visual cue and so the user can click anywhere in the space.<br />
In the example I have used
background-color to show the links, in the real site this is an image.
Is this possible?
It seems the answer is No, at least not reliably across browsers. I've accepted the closest answer to this which also contains a link to an SO question that describes the relevant ambiguity in the spec.Answer1:
height:0px to the parent elemetns
#calsd so that the
height:100% on anchors will work.
<a href="http://jsfiddle.net/VmcXh/4/" rel="nofollow">Demo</a>
(<em>Parent element needs explicit height set for
% height. refer this <a href="https://stackoverflow.com/questions/19684509/how-do-i-make-a-div-fill-an-entire-table-cell" rel="nofollow">old SO question</a></em>)
You can also apply
display:inline-block; to the anchors as <a href="https://stackoverflow.com/users/1253479/jack-pattishall-jr" rel="nofollow">Jack Pattishall Jr</a> pointed out in the comments
<a href="http://jsfiddle.net/VmcXh/3/" rel="nofollow">Demo</a>Answer2:
here is my
<a href="http://jsfiddle.net/VmcXh/5/" rel="nofollow">Fiddle</a>