DIV height 100% dentro de un TD
30/09/2019 by 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

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <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>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.