Ссылка для заполнения родительского тега (td, div) - PullRequest
Новая
       0

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

2 голосов
/ 18 декабря 2011

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

Я нашел этот вопрос здесь , где Гаурав Саксена сделал сообщение, которое сначала сработало - пока я не добавил 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>

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

Ответы [ 2 ]

1 голос
/ 18 декабря 2011

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

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

1 голос
/ 18 декабря 2011 
$('td a').each(function(){
    $(this).css({
        'width': $(this).parent().width(),
        'height': $(this).parent().height()
    });
});

Запустить загрузку DOM документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...