Las etiquetas DIV con un alto relativo del 100% no se cambian de tamaño en Internet Explorer

  • Artículo
  • Tiempo de lectura: 2 minutos

Importante

La aplicación de escritorio Internet Explorer 11 está retirada y sin soporte a partir del 15 de junio de 2022 para determinadas versiones de Windows 10.

Todavía puede acceder a sitios antiguos heredados que requieren Internet Explorer con el modo Internet Explorer en Microsoft Edge. Obtenga más información.

La aplicación de escritorio Internet Explorer 11 se redirigirá progresivamente al explorador Microsoft Edge, más rápido y seguro. En última instancia, se deshabilitará a través de Windows Update. Deshabilite IE hoy.

En este artículo se presenta un comportamiento por diseño que una etiqueta DIV con un alto relativo del 100 % no cambia el tamaño en Internet Explorer 9 o en una versión posterior.

Versión del producto original:   Internet Explorer 9 y versiones posteriores
Número KB original:   2674902

Síntomas

En Internet Explorer 9 o una versión posterior, se usa una tabla con un alto absoluto y al menos dos celdas en una fila. Una celda contiene texto y la otra contiene una etiqueta DIV con un alto relativo del 100 %. El texto no cabe en el alto especificado y, por lo tanto, se cambia el tamaño de la tabla. La etiqueta DIV permanece en el alto absoluto inicial de la tabla y no se cambia de tamaño automáticamente.

Más información

Este comportamiento es por diseño y se aplica al modo estándar para todas las versiones admitidas de Internet Explorer 9 y versiones posteriores.

Nota

El comportamiento puede ser diferente en el Modo de peculiaridades y en la emulación del modo de quirks (QME) cuando se usa Internet Explorer 9 o una versión posterior.

A continuación se muestra un ejemplo del comportamiento descrito anteriormente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <body>
        <table style="height:50px;" border="1px">
            <tr>
                <td style="height:100%">
                    <p>
                        this text does not fit and will resize the table<br />this text does not fit and will resize the
                        table<br />
                        this text does not fit and will resize the table<br />this text does not fit and will resize the
                        table<br />
                    </p>
                </td>
                <td style="height:100%; width:50px;">
                    <div style="height:100%; border:1px solid red;"></div>
                </td>
            </tr>
        </table>
    </body>
</html>

Según la especificación W3, el alto del cuadro de contenido de una celda no se verá afectado por el alto de la fila y cualquier alto adicional debe ir hacia el relleno de la celda. A continuación, el elemento secundario de la celda debe resolver su alto porcentual en el cuadro de contenido de la celda, que no cambia en el alto de la fila.

Según CSS 2.1, el alto de un cuadro de celda es el alto mínimo requerido por el contenido. La propiedad de la celda de tabla puede influir en el alto de la fila (vea más arriba), pero no aumenta el alto height del cuadro de celda. Los cuadros de celda que son más pequeños que el alto de la fila reciben un relleno superior o inferior adicional.

Para obtener más información, vea Definir la compatibilidad del documento.