CSS: Сделать элемент блока заполнить все пространство родительского элемента?

Я пытаюсь поместить ссылку в элемент <th>, и элемент <a> заполнит все пространство <th>. В то время как я могу получить его для горизонтальной горизонтальной ширины: 100%, заставить его заполнить по вертикали, как оказалось, хлопотно. высота: 100%, похоже, не имеет эффекта.

Я хочу сделать это, чтобы пользователь мог щелкнуть в любом месте ячейки, чтобы активировать ссылку. Я знаю, что могу поместить свойство onClick в <th> и обработать его через javascript, но я бы хотел сделать это "правильным" способом css.

Уточнение: Каждая строка таблицы может иметь разную высоту, потому что контент является динамическим, поэтому решения, использующие фиксированную высоту для элементов <a> или <th>, не будут работать.

Вот пример кода:

<style type="text/css">
th {
  font-size: 50%;
  width: 20em;
  line-height: 100%;
}
th a {
  display:block;
  width:100%;
  height:100%;
  background-color: #aaa;
}
th a:hover {
  background-color: #333
}
</style>
<table border=1>
  <tr>
    <th><a href="foo">Link 1</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.</td>
  </tr>
  <tr>
    <th><a href="foo">Link 2</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. </td>
  </tr>
</table>

И вот страница с этим точно таким же кодом

Как вы можете видеть, если вы наведите указатель мыши на ссылку, элемент <a> не заполняется вертикально, что создает неудобный вид. Я мог бы зафиксировать фон hover, поместив его в стиль th: hover a, но ссылка по-прежнему будет работать только на самом деле, если вы щелкнете, где находится фактический тег a.

Ответ 1

просто измените стиль на этот

th {
  font-size: 50%;
  width: 20em;
  height: 100%;
  line-height: 100%; 
}

веселит

Ответ 2

Как @Hober, вы должны указать высоту <th>. Вы также можете использовать height: 100%.

Если вы знаете размеры вашего <th>, который выглядит так, как вы, вероятно, не будете в этом случае (так как они на стороне), мне повезло добавить прописку, чтобы нажать <a> (мимо любого отступов от самого <th>), а затем возвращая его обратно с соответствующим отрицательным запасом. Вот так:

th a{
  padding: 10px 0;
  margin: -10px 0;
}

Ответ 3

Вам нужно указать высоту <th>, чтобы в вашем блоке стиля было что-то вроде

th {
  font-size: 50%;
  width: 20em;
  height: 8ex;
  line-height: 100%;
}

Изменить: На самом деле, для высоты, вероятно, следует использовать вертикальную меру, например "ex", вместо горизонтальной меры "em". Пример изменен, чтобы отразить это.

Ответ 4

Чтобы сделать это, вы можете установить ВЫСОТУ вашего элемента "a" в пикселях вместо процента.

Если вы укажете процент, 100% в конечном итоге будет высотой самого ТЕКСТА.

Высота пикселя даст вам статическую высоту и будет работать для этой ситуации.

td a {height: 100px;}

Ответ 5

Вы можете сделать это с помощью javascript (см. ниже).

<style type="text/css">
th {
font-size: 50%;
width: 20em;
background-color: #aaa;

}
.off {
background-color: #aaa;
}
.on {
background-color: #333
}


<th onmouseover="this.className='on'" onmouseout="this.className='off'">><a href="foo">Link 1</a></th>

Ответ 6

Элемент th должен иметь назначенную ему высоту. Давая ему высоту 100%, следует заставить элемент расширяться до высоты его контейнера (т.е. Высоты строки). Это может не работать должным образом в IE 6, вы можете попробовать добавить _height: 1% в адрес IE6 - у меня нет IE6 для проверки этого, но я тестировал в Firefox и, похоже, делает то, что вы хотите.

th {
  height: 100%;
}

Ответ 7

Ближайший я получил это...

th {
  float: left;
  overflow: hidden;
  font-size: 50%;
  width: 20em;
  margin: auto;
}
th a {
  display: table; /* or block, up to you */
  margin: none;
  width:100%;
  height: 1px;
  background-color: #aaa;
  padding: 20%;
}

Но он делает все ваши ряды одинаковой высоты. Может быть, кто-то может это исправить, если это проблема.