Have link fill div vertically


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.


Apply height:0px to the parent elemetns #calla and #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>


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

here is my

<a href="http://jsfiddle.net/VmcXh/5/" rel="nofollow">Fiddle</a>


  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Converter from SAT to 3-SAT
  • Excel VBA How to populate a multi-dimensional (3d) array with values from multiple excel ranges?
  • cell spacing in div table
  • How can I speed up CURL tasks?
  • MonoTouch: How to download pdf incrementally as indicated in the Apple slides “Building Newsstand Ap
  • Google Custom Search with transparent background
  • How to clear text inside text field when radio button is select
  • Android fill_parent issue
  • Python CGI os.system causing malformed header
  • Repeat a vertical line on every page in Report Builder / SSRS
  • NetLogo BehaviorSpace - Measure runs using reporters
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • How reduce the height of an mschart by breaking up the y-axis
  • Get object from AWS S3 as a stream
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Cross-Platform Protobuf Serialization
  • WinForms: two way TextBox problem
  • Validaiting emails with Net.Mail MailAddress
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Do I've to free mysql result after storing it?
  • R: gsub and capture
  • Calling of Constructors in a Java
  • php design question - will a Helper help here?
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Traverse Array and Display in markup
  • bootstrap to use multiple ng-app
  • Transpose CSV data with awk (pivot transformation)
  • Comma separated Values
  • How to get icons for entities from eclipse?
  • AngularJs get employee from factory
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Android Google Maps API OnLocationChanged only called once
  • Turn off referential integrity in Derby? is it possible?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • JaxB to read class hierarchy
  • How to load view controller without button in storyboard?