DIV height 100% dentro de un TD
30/09/2019 por Casanova

Front.id

Dentro del universo CSS es frecuente que nos toque implementar un diseño que a priori nos parezca simple pero que al momento de trabajar en ello, se nos complique y complique...

CSS

Pero voy a evitar entrar en detalles acerca de que fue lo que me llevo a profundizar en esto, para el caso vamos a tomar un ejemplo sencillo. Tenemos una tabla:

<div class="container">
  <table>
    <tr>
      <td>
        <div>
          <img src="https://via.placeholder.com/50x50" alt="">
        </div>
      </td>
      <td>
        <div>
          <img src="https://via.placeholder.com/50x100" alt="">
        </div>
      </td>
      <td>
        <div>
          <img src="https://via.placeholder.com/50x50" alt="">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <img src="https://via.placeholder.com/50x50" alt="">
        </div>
      </td>
      <td>
        <div>
          <img src="https://via.placeholder.com/50x50" alt="">
        </div>
      </td>
      <td>
        <div>
          <img src="https://via.placeholder.com/50x100" alt="">
        </div>
      </td>
    </tr>
  </table>
</div>

En este caso hemos aplicado algunos estilos, a los TD un background color verde claro, y a los DIV interiores uno celeste claro. Dentro de los DIV tenemos una imagen de ejemplo que es la que pueden ver en gris. 

table

Siguiendo este ejemplo, imaginemos que necesitamos que todas las imágenes ocupen el mismo alto, para ello necesitaríamos que el DIV ocupara el 100% del alto del TD y ahí esta la cuestión. Si bien el DIV posee un height del 100% no llega a tomar todo el alto del TD.

¿Por que?
La explicación sencilla es que:
Cuando seteamos un elemento con alto porcentual, necesitamos que algún contenedor padre tenga establecido un alto fijo.
Para ello nos basta incluso con un alto "falso", es decir que con solo agregar height: 0; ya sea a la tabla o al TD , logramos que nuestro DIV ocupe todo el alto.

Testeado y funcionando en: IE 11, Edge, FF, Chrome, IOS.

Les dejo este código de ejemplo para que puedan verlo en funcionamiento.

See the Pen Div height 100% inside TD by Marco (@casanova347) on CodePen.

Tags

Agregar nuevo comentario

El contenido de este campo se mantiene privado y no se mostrará públicamente.

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Las líneas y los párrafos se rompen automáticamente.
  • Las direcciones de las páginas web y las direcciones de correo electrónico se convierten en enlaces automáticamente.