Expandir una etiqueta <a> para llenar el espacio

¿Cómo puedo hacer que la etiqueta de anclaje se expanda hasta la parte inferior de la lista? Sé que podría poner el ancla alrededor de la etiqueta del elemento de la lista, pero eso rompe XHTML 1.0 Cumplimiento estricto, por lo que no puedo hacerlo.Expandir una etiqueta <a> para llenar el espacio

<html> 
    <head> 
    <style> 
     #listWrapper { text-align:center;} 
     #list { margin-left: 0px auto; margin-right: 0px auto; width: 100%; min-height: 100%; height:100%; margin-bottom: 10px; margin-top: 0px;} 
     #list ul { padding: 5px 10px 10px 10px; margin: 0; min-height: 100%;} 
     #list li { clear:both; font-weight:bolder; height:auto; border-bottom: 1px solid Silver; border-left: 1px solid Silver; font-size:x-small; border-right: 1px solid Silver; list-style-type: none;} 
     #list a:hover { background-color: red;} 
     #list a { display:block; cursor:pointer; text-decoration: none; text-align:left; vertical-align:top; } 
     #list h3 { background-color:Silver; vertical-align:top; font-size:larger; } 
     #list img { height:auto; margin: 8px; float:left; vertical-align:top; border:solid 1px Silver;} 
    </style> 
    </head> 
    <body> 
    <div id="listWrapper"> 
     <div id="list"> 
     <ul> 
      <li> 
      <h3>title</h3> 
      <a href="#"> 
       <img src="/images/x.jpg" alt="" /> 
       Lorem ipsun........ 
      </a> 
      <div style="clear:both;" /> 
      </li> 
      <li> 
      <h3>title</h3> 
      <a href="#"> 
       <img src="/images/x.jpg" alt="" /> 
       Lorem ipsun........ 
      </a> 
      <div style="clear:both;" /> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

Fuente

2009-09-04 simon831

Una combinación de sus respuestas arreglado. Muchas gracias ....

#list ul { display: block; } 
#list li { display: block;} 
#list a { display:block; height:100%; }

Fuente

2009-09-04 12:17:05 simon831

Esta debería ser la respuesta aceptada +1 – jhamPac

#list a {display: block; altura: 100%; } lo arregló para mí. –

uso de este CSS:

#list ul li a { display: block }

Fuente

2009-09-04 11:37:26 soniiic

que el CSS ya está en marcha, bajo el selector a '' #list. –

Esto no parece funcionar – simon831

Esto es bastante simple y funcionó bien. – JGallardo

para llenar la parte inferior, que debe arreglar los márgenes de imagen - en este momento la imagen se toma demasiado espacio con su 8px margen. Para completar la parte superior, debe eliminar el margen inferior de h3.

#list h3 { margin-bottom: 0; } 
#list img { margin: 5px 8px; }

Fuente

2009-09-04 11:47:54

Tenga en cuenta que probé esto en mi computadora portátil local, sin acceso al archivo 'images/x.jpg', por lo que los márgenes que sugerí son para una imagen de' 1x1 px'. Si su imagen es de un tamaño diferente, es posible que deba ajustar los márgenes de manera diferente. –

Trate de ajustar la altura de la #list a un tamaño fijo, y la altura de #list a a 100%.

Diferencias con el código existente:

#list 
    { 
     min-height: 100px; 
     height: 100px; 
    } 

    #list a 
    { 
     height:100%; 
    }

Fuente

2009-09-04 11:49:52 awe

... pero #list no tiene un tamaño fijo, varía. – simon831

La razón de esto es que a veces el navegador no entiende cuál es el tamaño relativo si no al menos uno de los padres tiene tamaño fijo. Creo que esto es más un problema en Internet Explorer. Pero me alegra que hayas encontrado la solución para tu problema. – awe

poner el

<br style="clear: both;"/>

dentro de la etiqueta de anclaje.

EDIT: div cambiado a BR

Fuente

2009-09-04 11:57:42 ZippyV

que rompe XHTML 1.0 Estricto cumplimiento – simon831

Solucionado, este código pasó la validación W3. – ZippyV

Esto es lo que hice:

<!-- teh codes --> 
<style type="text/css"> 
    .nav-cell 
    { 
    height: 35px; 
    padding: 0px; /* just to make sure the link will fill the entire cell */ 
    text-align: center; 
    width: 92px; 
    } 
    .nav-cell-link 
    { 
    display: block; 
    width: 100%; 
    height: 100%; 
    } 
    .nav-cell-link-text 
    { 
    display: block; 
    padding-top: 11px; 
    } 
</style> 
<!-- teh codes --> 
<table cellpadding="0" cellspacing="0" style="height: 35px;"> 
    <tr> 
    <td class="nav-cell"> 
     <a href="#" class="nav-cell-link"> 
     <span class="nav-cell-link-text">Link Text</span> 
     </a> 
    </td> 
    </tr> 
</table> 
<!-- teh codes -->

Fuente

2010-07-02 13:20:56

Expandir una etiqueta <a> para llenar el espacio

Respuesta

Cuestiones relacionadas