Make anchor whole height of the div for display:block

Question

I have simple html:

<div class='mydiv'>
    <a href='#'>Link</a>    
<div>

and css:

div.mydiv { height: 200px; width: 200px; background-color:red; }
div.mydiv a { display:block; color:yellow; background-color:green; }

I need anchor occupy entire space of the div, for that I added display:block; to my css, but occupies only top line of the div.

What is wrong and how can I fix that? Thanks

For li: http://stackoverflow.com/questions/6323465/anchor-in-list-elements-not-filling-available-space-with-displayblock-and-heigh, for table cell: http://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height — Ciro Santilli OurBigBook.com, Nov 17 '14 at 08:55

score 4 · Accepted Answer · answered Mar 09 '13 at 15:54

4

Add height:100% to the anchor CSS:

div.mydiv a {
    display:block;
    color:yellow;
    background-color:green;
    height:100%;
}

answered Mar 09 '13 at 15:54

j08691

score 2 · Answer 2 · answered Mar 09 '13 at 15:54

2

You can define the height of your ancor like this

a {height: 100%}

answered Mar 09 '13 at 15:54

topless

2 Answers2