Make a link stretch the size of a li

you can’t really make li items link from what i know. but often i’d like the whole area of one to be clickable. one trick i have found is setting the height of the li to be 1%. but not sure what css needs to be applied the a property. anyone have examples of this?

making a cell of a calendar clickable is one application of what i’m talking about.


Anchors are inline elements and therefore they have no height or width apart form the content they hold. To make them stretch the full width of their parent you need to set them to display:block.

IE6 needs haslayout to make the whole area active which is where you saw the height:1% hack being used but it must be given only to ie6.

Some examples here:

thank you! the interesting thing about that example is i don’t see height declared anywhere.

You would only need a height if the parent had a height defined :slight_smile:

At present it is the content creating the height so it will stretch the parent automatically so parent and child are always the same height.

If you set the parent to height 300px for example then the content would only be 100px high and the background would only change on the content and not the whole parent. In that case you’d need a height on the child also to match.

Most times you would want to avoid setting heights unless you are trying to make a number of elements the same size. the problem with setting a height is that it can never grow and if text is resized or content increased the content will overflow.

i did a quick experiment armed with your info, and i seem to have it figured out. thank you