Anchor tags - equal height, still clickable with CSS?

I have a little code on jsfiddle: http://jsfiddle.net/tYrCe/1/ Edit it开发者_StackOverflow中文版 if you like!

I have 3 buttons with anchor tags. I would like them to be equal in height.

Requirements

• Equal in height
• Independent of content (min-height, not ok)
• The whole link should still be clickable (javascript onclick, not ok)

---

You can use display: table-cell.

table-layout: fixed evenly distributes the available width between the cells.

Make sure the browser support is acceptable to you: http://caniuse.com/css-table
(I assume no IE6/7 support is fine because you're using outline)

See: http://jsfiddle.net/thirtydot/Ab6bg/

.urls {
    width: 300px;
    background: #fff;
    display: table;
    table-layout: fixed
}
.urls a {
    display: table-cell;
    outline: 1px solid #ccc
}

---

The classic, pure CSS, way is to use a large bottom padding and then reverse margin as discussed in this "Position is Everything" article.

Here is your fiddle modified accordingly.

HTML:

<div class="urls">
    <a href="#">A little content</a>
    <a href="#">A little more content with more text</a>
    <a href="#">A little very much more content with very much more text</a>
</div>

CSS:

.urls {
    width: 300px;
    overflow-y: hidden;
}
.urls a {
    display: inline-block;
    float: left;
    padding-bottom: 30em;
    margin: 0 0 -29em;
    width: 33.33%;
}