Have link fill div vertically

Question

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: http://jsfiddle.net/VmcXh/1/

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.
In the example I have used background-color to show the links, in the real site this is an image.

Is this possible?

Update:

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.

display:block on the anchor, or put the div inside the anchor — Banana, Jul 05 '14 at 17:40
For `display: inline-block` solution also add `vertical-align: top`: http://jsfiddle.net/3MmLz/. — DRD, Jul 05 '14 at 18:40
@Banana I already had `display:block` on the anchor, switching the order also does not do it — AntG, Jul 07 '14 at 07:37
@JackPattishallJr., DRD, Sorry, neither of these solutions are working in Firefox — AntG, Jul 07 '14 at 07:38

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

Apply height:0px to the parent elemetns #calla and #calsd so that the height:100% on anchors will work.

Demo

(Parent element needs explicit height set for % height. refer this old SO question)

Update:

You can also apply display:inline-block; to the anchors as Jack Pattishall Jr pointed out in the comments

Demo

edited May 23 '17 at 11:49

Community

1
1

answered Jul 05 '14 at 17:48

T J

42,762
13
83
138

Thanks for your answer but this isn't working, either on my site or the JSFiddle demo, so maybe it is browser dependent? I am using latest version of Firefox – AntG Jul 05 '14 at 17:56
Hmm, yes, I can see this working in both IE and Chrome, but it doesn't work in Firefox. Unusual for FF to be the one to let the side down, but unfortunately I therefore don't think I can use it as an anwer – AntG Jul 05 '14 at 18:03
@AntG It's working in chrome, safari & opera (*webkits*), updated solution is working in chrome, safari, opera & ie. Nothing works in FF!. Please check the accepted answer for the question i mentioned in answer... since the spec doesn't clearly mention how to implement it, it seems different engine are using their own implementation. – T J Jul 05 '14 at 18:09

score 0 · Answer 2 · answered Jul 05 '14 at 17:53

0

provide some javascript function on div and apply style cursor:pointer

here is my

Fiddle

answered Jul 05 '14 at 17:53

Nirav Prajapati

2,987
27
32

Have link fill div vertically

2 Answers2

Linked