tipo - span html

CSS: ¿un elemento de bloque llena el espacio completo de un elemento principal?

Question

Estoy intentando poner un enlace en un elemento <th> y hacer que el elemento <a> llene todo el espacio del <th> . Aunque puedo hacer que filme horizontalmente con ancho: 100%, lograr que se llene verticalmente es problemático. altura: el 100% parece no tener efecto.

Quiero hacer esto para que el usuario pueda hacer clic en cualquier parte de la celda para activar el enlace. Sé que podría poner una propiedad onClick en el <th> mismo y manejarlo a través de javascript, pero me gustaría hacerlo de la manera "correcta".

Aclaración: cada fila de la tabla puede tener una altura diferente porque el contenido es dinámico, por lo que las soluciones que usan una altura fija para los elementos <a> o <th> no funcionarán.

Aquí hay un código de muestra:

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

Y aquí hay una página con ese mismo código exacto

Como puede ver si pasa el mouse sobre el enlace, el elemento <a> no se está llenando verticalmente, lo que produce una apariencia incómoda. Podría arreglar el fondo emergente colocándolo en un estilo " th: hover a ", pero el enlace solo funcionaría realmente si hiciera clic donde está la etiqueta real.

Answer 1

Debes dar una altura a la <th> , para que tu bloque de estilo termine algo así como

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

Editar: en realidad, para la altura, probablemente debería usar una medida vertical como "ex", en lugar de una medida horizontal de "em". Ejemplo cambiado para reflejar eso.

Answer 2

El elemento th necesita tener una altura asignada. Darle una altura del 100% debería hacer que el elemento se expanda a la altura de su contenedor (es decir, la altura de la fila). Es posible que esto no funcione correctamente en IE 6, puede intentar agregar _height: 1% a la dirección IE6 - No tengo IE6 para probar esto, pero probé en Firefox y parece estar haciendo lo que desea.

th {
height: 100%;
}

Answer 3

Lo más cerca que me quedaba era esto ...

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

Pero hace que todas tus filas tengan la misma altura. Tal vez alguien más puede arreglar eso si es un problema.

Answer 4

Para hacer esto, puede establecer la ALTURA de su elemento "a" en píxeles en lugar de porcentaje.

Si especifica un porcentaje, 100% terminará siendo la altura del TEXTO.

Una altura de píxel le dará una altura estática y funcionará para esta situación.

td a {height: 100px;}

Answer 5

Puedes hacer esto con javascript (ver a continuación).

<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

simplemente cambie el estilo a este

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

aclamaciones

Answer 7

Como dice @Hober , necesitas dar una <th> altura <th> alta. También puede usar la height: 100% allí.

Si conoce las dimensiones de su <th> , que parece que probablemente no tendrá en este caso (ya que están en el lateral), he tenido suerte agregando un relleno para empujar el <a> hacia el bordes (más allá de cualquier relleno del <th> mismo), y luego traerlo de nuevo con un margen negativo correspondiente. Me gusta esto:

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