Ссылка, чтобы заполнить родительский тег (td, div)

Как получить ссылку, чтобы иметь ту же высоту и ширину, что и родительский тег, где размеры родительских тегов являются переменными?Ссылка, чтобы заполнить родительский тег (td, div)

Я нашел this question here, где Gaurav Saxena сделал сообщение, которое сработало сначала - пока я не добавил DOCTYPE для HTML5. Если я это сделаю, он больше не работает в Firefox 8 (однако он продолжает работать в Chrome).

Так вот полный пример:

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
.std {width: 200px; border: solid 1px green; height: 100%} 
.std a {display: inline-block; height:100%; width:100%;} 
.std a:hover {background-color: yellow;} 
</style> 
<title></title> 
</head> 
<body> 
<table> 
    <tbody> 
    <tr> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 1<br> 
    second line</a> 
    </td> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 2</a> 
    </td> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 3</a> 
    </td> 
    <td class="std"> 
    <a href="http://www.google.com/">Cell 4</a> 
    </td> 
    </tr> 
</tbody> 
</table> 
</body>

Заранее спасибо за вашу помощь!

источник

2011-12-18 Markstar

$('td a').each(function(){ 
    $(this).css({ 
     'width': $(this).parent().width(), 
     'height': $(this).parent().height() 
    }); 
});

Выполнение работ по документу DOM load.

источник

2011-12-18 14:24:41

Спасибо за Ваш ответ, но я предпочел бы решение, которое работает без JavaScript. – Markstar

Theres нет надежного способа css заполнить элемент в родительский элемент, не зная хотя бы одну ширину или высоту набора. Есть обходные пути, как, например, выше, что будет более надежным кросс-браузер. –

Это не работает, потому что у вас есть процентная высота в процентах высоты без высоты. Чтобы уточнить, у вас есть height: 100%; по ссылке, которая будет опираться на высоту родительского элемента (td). Это также 100%, который затем полагается на его родительскую высоту, которая не задана. Поэтому у него нет работы с шириной. Исправить это было бы установить высоту на таблице или в tds.

Пример: http://jsfiddle.net/8rRtZ/1/

источник

2011-12-18 14:38:58 Will

Ссылка, чтобы заполнить родительский тег (td, div)

ответ

Смежные вопросы