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

Question

Я пытаюсь поместить ссылку в элемент <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> не заполняется вертикально, что создает неудобный вид. Я мог бы исправить фон наведения, поместив его в стиль " th: hover * ", но ссылка по-прежнему действовала бы только в том случае, если вы нажали, где находится фактический тег a.

Answer 1

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

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

ура

Answer 2

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

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

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

Answer 3

Самое близкое, что у меня было, это ...

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%;
}

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

Answer 4

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

th {
  height: 100%;
}

Answer 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>

Answer 6

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

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

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

td a {height: 100px;}

Answer 7

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

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

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