Problema de CSS, la tabla no llena la pantalla

He tenido un problema con una tabla que quiero llenar en la ventana del navegador. Tiene 3 columnas de ancho y 5 filas de alto. Mi resultado deseado es que cada celda tenga el 33 % del ancho de la pantalla y cada celda tenga el 20 % del alto de la pantalla. No hay valores fijos, sino que quiero hacer todo con porcentajes, para que cambie el tamaño/estire para llenar siempre el navegador.

El problema es que como cambio el tamaño del navegador aunque el ancho funciona perfectamente, el alto no funciona de la misma manera. Aunque especifiqué cada fila TR con un 20% de alto, no funciona de esa manera. Lo que sucede es que la mitad inferior de la pantalla permanece vacía y las 5 filas no siguen el 20% de altura que especifiqué. En un caso extraño (mientras probaba cosas), la primera fila era el 50% de la altura y el otro 50% eran las 4 filas inferiores. Actualmente (como se muestra a continuación), estas 5 filas ocupan aproximadamente el 60 % de la altura de la pantalla y el 40 % restante no se usa. ¿Mencioné que odio CSS?

Aquí está la mesa:

<div id="portrait" style="width:100%;height:100%;">
    <table cellpadding=0 cellspacing=0 border=1 style="width:100%;height:100%;">
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
    </table>
</div>

En cada nivel, defino el ancho y el alto, y luego dentro defino un porcentaje relativo teniendo en cuenta el contenedor principal. En el nivel más interno, donde está la etiqueta de la imagen, se establece en 100 % x 100 % para que llene su contenedor (ancho como 33 % definido en el TD y alto como 20 % definido en el TR).

Así es como leí el html anterior hasta la primera imagen. El div está configurado para usar el 100% del ancho del navegador y el 100% de la altura. Contiene un solo elemento, una tabla. La tabla está definida en 100 % x 100 %, pero eso, por supuesto, está limitado por su contenedor principal: el div, pero como también es 100 % x 100 %, la tabla debe tener el tamaño completo del navegador (en mi humilde opinión). El TR define el ancho al 100%, por lo que llena el ancho del navegador. Está configurado al 20 % de la altura, por lo que creo que eso significa que debe fijarse al 20 % de la altura de la mesa, que es el 20 % del 100 % de la pantalla. El TD se define como 33 % de ancho (3 columnas de 33 % para llenar el navegador) y 100 % de altura (esta columna llenará el 100 % de su TR principal, que se establece en el 20 % de la altura del navegador). Finalmente, la imagen se configura para llenar su TR/TD y, por lo tanto, se configura en 100%x100%.

preguntado el 01 de julio de 12 a las 12:07

Tu ensayo fue demasiado largo para que quisiera leerlo, pero la mayoría de los problemas tienen que ver con height y los porcentajes se deben al hecho de que no tienen una altura base para trabajar, así que intente agregar html, body { height: 100% } y ver si esto resuelve su problema. Si no es así, reformule su pregunta para que vaya directamente al grano. -

Y eliminar la altura de todos los td -

@Me duele la cabeza, es difícil encontrar el equilibrio perfecto entre ser demasiado breve y tener que responder a un torrente de preguntas y llamadas para obtener más información, y ser demasiado detallado. Caí del lado de ser demasiado detallado esta vez :-( -

4 Respuestas

Aquí está el violín: http://jsfiddle.net/surendraVsingh/R3aCb/

Y aquí está el código de trabajo:

HTML:

<div id="portrait" style="width:100%;height:100%;">
    <table cellpadding=0 cellspacing=0 border=1 height="100%" style="width:100%; height:100%;">
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
    </table>
</div>​

CO

html, body{height:100%;}​

Respondido 01 Jul 12, 12:07

Gracias SVS. Eso resolvió el problema. Tiene sentido que el TD no necesite una altura (pero me sorprende que tener una fuera un problema). Sin embargo, la altura del cuerpo tiene mucho sentido. - Dee2000

Debe agregar lo siguiente a su estilo.

html, body { height: 100% }

Y cambia tu

<td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>

a

<td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>

Puedes verlo aqui, http://jsfiddle.net/RFdSw/

Respondido 01 Jul 12, 12:07

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            html, body{height:100%;width:100%;margin:0;padding:0}
            #mytable
            {
                height:100%;
                width:100%;
                table-layout:fixed;
            }           
            #mytable td
            {
                width;33%;
                height:19%;
            }
            #mytable td img
            {
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="portrait" style="width:100%;height:100%;">
    <table cellpadding="0" cellspacing="0" border="1" id="mytable">
        <tr>
            <td><img src="bg-bottom.gif"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
    </table>
</div>

    </body>
</html>

Esto debería hacer por ti.

Respondido 01 Jul 12, 12:07

Prueba esta

#portrait {
    height: 0;
}
table {
    height: 100%;
}
tr {
    height: 20%;
}

Respondido el 12 de enero de 14 a las 02:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.