65700

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: <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?

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.

Answer1:

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>)

<em>Update:</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:

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>

Recommend

  • 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?