Problemas con el height de las filas en IE7

Urotsuki · #1 (**permalink**) 15/02/2008, 11:02

Hola,

tengo una página muy sencilla con este código:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="width:100%;height:100%;">
<body style="margin:0px;width:100%;height:100%;">

<table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;">
<tr style="height:30px;"><td>Some text</td></tr>
<tr><td>Some text</td></tr>
<tr style="height:30px;"><td>Some text</td></tr>
</table>

</body>
</html>

Lo que quiero es tener una tabla con unas filas con un alto fijo (en px, no en porcentaje), y otra fila que ocupe el resto de espacio.

Pues bien, no consigo que las filas inicial y final tengan el alto deseado (30px) con Internet Explorer 7. En firefox funciona bien, y con el mismo IE7, en quirks mode (sin el doctype), también funciona bien (como siempre había funcionado); pero con el doctype no funciona.

También me interesaría saber si este tipo de layout puede replicarse utilizando divs (div inicial con alto fijo + div central que ocupa el espacio que quede + div final con alto fijo)

Muchas gracias por vuestra ayuda!

hades87 · #2 (**permalink**) 15/02/2008, 13:40

cualquier cosa hecha con tablas es posible hacerla con xhtml+css, pero no a la inversa, si quieres aquí tienes un manual de css:

http://librosweb.es/css/index.html

Urotsuki · #3 (**permalink**) 19/02/2008, 09:11

Gracias por la respuesta.

Si cualquier cosa hecha con tablas es posible hacerla con xhtml+css, me gustaría que me dijeras exactamente cómo; por ejemplo fíjate en el siguiente código HTML 3.2 (muy simple!):

Código HTML:

<html>
<body>
<table style="width:100%;height:100%;" border="1">
<tr style="height:50px;"><td>Esta fila tendrá siempre 50px de alto</td></tr>
<tr><td>Esta fila ocupará el resto de alto</td></tr>
</table>
</body>
</html>

El comportamiento de la tabla está claro, la primera fila tendrá siempre 50px de alto y la segunda ocupará el resto de alto del body. Pues bien, he investigado bastante y preguntado en foros, etc, y todavía no he sabido encontrar ni cómo hacerlo ni a nadie que me diga cómo se puede hacer sin usar una tabla (y como ya dije en el post inicial, en IE7 en modo strict ni siquiera usando una tabla, pero eso supongo que será un bug del IE?).

En la documentación que me has pasado tampoco he encontrado nada que resuelva este problema, ni siquiera en el capitulo 12 (que tenía buena pinta).

hades87 · #4 (**permalink**) 19/02/2008, 14:24

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
html, body{
height:100%;
}
#c1{
border:1px solid #000;
height:50px;
width:100%;
}

#c2{
height:100%;
width:100%;
border:1px solid #000;
border-top:none;
}
</style>
</head>
<body>
<div id="c1">aaa</div>
<div id="c2"></div>
</body>
</html>

con esto se consigue un poco lo que tu quieres, pero has de tener en cuenta u en firefox se desborda un poco.

Urotsuki · #5 (**permalink**) 21/02/2008, 05:22

Hola, gracias por la respuesta.

Con el código que me has proporcionado no consigo lo que yo quería... si por ejemplo el alto del body es de 600px, al poner esos dos divs tengo un div con 30px y otro div con 600px (100% del body), con lo cual el alto total de la pagina se me va a 630px y me sale la barra de scroll vertical.

El comportamiento deseado sería que, al tener el body 600px de alto, el primer div tuviera 30px de alto y el segundo 570px; pero sin tener que fijar ese segundo div a 570px (que lo hiciera automáticamente el navegador, como lo haría en caso de ser una tabla con dos filas, la primera con el alto fijado y la segunda con el alto no definido).

hades87 · #6 (**permalink**) 21/02/2008, 06:30

pues si lo quieres de 30px de alto, cambiale la altura: height:50px; y además te aconsejo mirarte un tutorial de css

Urotsuki · #7 (**permalink**) 21/02/2008, 13:03

No me estás entendiendo. No es cuestión de poner 50px. El código que me has pasado simplemente no replica el comportamiento de la tabla. Si pones un div con height 50px y luego otro div con height 100%, el resultado se sale de la pantalla. No es eso lo que quiero, no quiero que se salga de la pantalla, quiero que el de arriba ocupe un numero determinado de px (el que sea), y el otro ocupe el resto de espacio disponible de la pantalla, sin salirse.

Si lo pregunto es porque aunque me parece obvio que no es posible hacerlo con divs, la gente insiste en que los divs pueden replicar todo lo que se puede hacer con tablas; estoy deseando que alguien me explique cómo para incorporarlo a mi metodología de desarrollo.

En cuanto a lo del manual de CSS, gracias; siendo analista programador web desde hace más de 7 años ya me he mirado unos cuantos.

hades87 · #8 (**permalink**) 22/02/2008, 04:49

pues si eres analista programador desde ahce 7 años aún nos e que haces trabajando con tablas, si quieres que no se salga la "celda de abajo" aplícale menos % al html, body, en vez de 100, ve probando con 99, 98, 97%...

Urotsuki · #9 (**permalink**) 27/02/2008, 08:00

Pues precisamente sigo trabajando con tablas (en este caso concreto) porque no hay otra forma de hacerlo, tal y como está quedando demostrado.

La solución que propones tampoco es válida. Si fijo el % en 99%, 98%, 97% etc habrá tamaños de pantalla a los que no se verá bien. Una diferencia en porcentaje (ya sea 1%, 2%, etc) es muy diferente dependiendo del tamaño del navegador del usuario; si lo tiene maximizado igual son 10-20px mientra que si lo tiene en modo ventana más pequeña igual son 2-3px... por no hablar de las diferentes resoluciones de pantalla... con lo cual trabajando con "ajustes de porcentaje" nunca va a quedar bien en todos los tamaños posibles (aparte de que me parece una guarrada).

En serio, muchas gracias por las respuestas, pero este no es un problema trivial provocado por desconocimiento como pareces pensar. Tan sólo preguntaba por si alguien sabía positivamente que sí era posible hacerlo usando alguna técnica-truquillo especial.

David24 · #10 (**permalink**) 05/03/2008, 10:28

Hola Urotsuki,

Me pasa exactamente lo mismo que a ti, llevo bastantes años dedicado a esto, y me resisto a utilizar las dichosas capas, porque creo firmemente que tienen una dificultad extrema, aunque ya sabemos los beneficios que tienen.

Trabajar con tablas es arcáico, sí ya lo sé, pero yo necesito rápidez, no le puedo decir a mi jefe que me voy a dedicar 1 hora a colocar correctamente una capa, para que luego me de cuenta que es incompatible con Firefox a 1024 o IE 6 a 1280....

Bueno, que me desvío del tema... jejeje

Por supuesto, para este problema en concreto, yo utilizaría una tabla, porque con capas, he sido incapaz,... ...incapaz de que sea compatible con todo (o casi todo).

Pero ahora tengo el problema del DOCTYPE que cambia el comportamiento de los altos relativos.

En fin, yo no sé la respuesta a este problema, por eso estoy aquí, pero agradecería si alguien sabe, puede y quiere explicarnos como hacer una tabla height 100% con una fila height constante y otra fila con height variable, todo ello por supuesto con DOCTYPE strict.

Salu2

Urotsuki · #11 (**permalink**) 20/03/2008, 06:41

Hola David,

hacía tiempo que no venía al forum... al final si que encontré la solución para que funcione lo del height de las filas en explorer 7. Simplemente tienes que añadir <tbody style="width:100%;height:100%;"> y </tbody> a la tabla (encerrando la definición de las filas).

Espero que te ayude!

En lo demás, estoy totalmente de acuerdo contigo

David24 · #12 (**permalink**) 27/03/2008, 08:49

Hola Urotsuki, que tal...

He probado la solución que das, sobre tu propio ejemplo y no logro el alto total de la tabla sea el 100%, si no que se desborda exactamente el tamaño en píxeles fijos (60 px).

Un saludo

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="width:100%;height:100%;">
<body style="margin:0px;width:100%;height:100%;">

<table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;">
<tbody style="width:100%;height:100%;">
<tr style="height:30px;"><td>Some text</td></tr>
<tr><td>Some text</td></tr>
<tr style="height:30px;"><td>Some text</td></tr>
</tbody>
</table>

</body>
</html>

Urotsuki · #13 (**permalink**) 27/03/2008, 09:14

Pues es cierto, no me fijé en que salía la barra de scroll vertical... mi gozo en un pozo. Lo curioso es que en FF sigue haciéndolo bien (por eso no me había dado cuenta), así que no se si es bug del IE u otra alegre ocurrencia de los de la W3C (y por lo tanto bug del FF, aunque haga exactamente lo que nosotros queremos).

Mikmoro · #14 (**permalink**) 27/03/2008, 11:26

Pues no se si os referís a algo parecido a esto, o al menos partiendo de esta base:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulación de tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
}
#padre { border: 2px solid #f00;
min-height: 99%;
height: auto!important;
height: 99%;
position: relative;
}
#uno { border: 2px solid rgb(51, 255, 51);
background-color: transparent;
height: 50px;
}
</style>
</head>
<body>
<div id="padre">
<div id="uno">Esta fila tendrá siempre 50px de
alto</div>Esta fila ocupará el resto de alto<br/>
Esta fila ocupará el resto de alto<br/>
</div>
</body>
</html>

Mikel.

Urotsuki · #15 (**permalink**) 27/03/2008, 11:51

Hola Mikel,

gracias por el intento. Tu código no nos resuelve el problema, lo que queremos es ocupar todo el alto disponible. Es decir, donde tu pones:

Código:

Esta fila ocupar&aacute; el resto de alto<br/>
Esta fila ocupar&aacute; el resto de alto<br/>

, tener algo que realmente ocupara todo el alto disponible (por ejemplo un div con background color que ocupara toda la pantalla menos los 50px iniciales)

Mikmoro · #16 (**permalink**) 27/03/2008, 12:39

Pero no sé si has visto que esa caja tiene un borde, para que veas que efectivamente ocupa todo el resto de la página.

Míralo así:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Plantilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
}
#padre { border-color: rgb(255, 0, 0);
border-width: 2px;
height: auto ! important;
position: relative;
background-color: rgb(51, 153, 153);
min-height: 100%;
}
#uno { border-color: rgb(51, 255, 51);
border-width: 2px;
height: 50px;
background-color: rgb(102, 204, 204);
}
</style>
</head>
<body>
<div id="padre">
<div id="uno">Esta fila tendrá siempre 50px de
alto</div>
Esta fila ocupará el resto de alto<br />
</div>
</body>
</html>

Mikel.

Urotsuki · #17 (**permalink**) 27/03/2008, 12:45

Hola Mikel,

creo que no me entiendes. Mira este código, es el tuyo ligeramente modificado:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Plantilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
}
#padre { border-color: rgb(255, 0, 0);
border-width: 2px;
height: auto ! important;
position: relative;
background-color: rgb(51, 153, 153);
min-height: 100%;
}
#uno { border-color: rgb(51, 255, 51);
border-width: 2px;
height: 50px;
background-color: rgb(102, 204, 204);
}
</style>
</head>
<body>
<div id="padre">
<div id="uno">Esta fila tendr&aacute; siempre 50px de
alto</div>
<div id="estees" style="background-color:Red;">Esta fila ocupar&aacute; el resto de alto</div>
</div>
</body>
</html>

¿Ves el div llamado "estees", con color de fondo rojo? Ese es el que quiero que ocupe el resto de alto de la página.

Mikmoro · #18 (**permalink**) 27/03/2008, 12:54

Disculpa, pero creo que no me entiendes tú a mi.

Si el segundo div ha de ocupar todo el alto de la página... ¿para qué necesitas poner ese div "estees"? No hace ninguna falta, porque ese total del resto de la página lo cubre el div padre que he puesto, dentro del cual puedes poner lo que quieras y siempre ocupa el 100%.

Como ya decía, quizá no entiendo lo que quieres hacer en realidad. Si eres capaz de mandar una imagen con lo que quieres conseguir yo intento hacerlo con cajas y css.

Y lo consigo, me juego un dedo (de la mano izquierda)

Mikel.

Urotsuki · #19 (**permalink**) 27/03/2008, 13:09

Hola Mikel,

¿Para qué necesito el div "estees"? Pues porque es precisamente lo que necesito! No se, imagina que quiero poner el texto ese de "Esta fila ocupará el resto de alto" centrado verticalmente...

uff que peligro jugarte el dedo...

te comento que este problema lo he puesto en muchos forums y nadie lo ha sabido resolver (no creo que se pueda

)

Ahi va la imagen de lo que quiero:

También el código que lo emularía (con tablas en quirks mode):

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<body style="margin:0px;">

<table border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;">
<tr style="height:50px;"><td align="center" valign="middle" style="background-color:Red;">FILA 1</td></tr>
<tr><td align="center" valign="middle" style="background-color:Blue;">FILA 2</td></tr>
</table>

</body>
</html>

Ten en cuenta que tiene que valer para todas las resoluciones y/o tamaños de la ventana de navegador del que lo esté viendo (y sin javascript, que entonces es muy fácil

)

Mikmoro · #20 (**permalink**) 27/03/2008, 13:17

Que el texto de la segunda celda esté centrado verticalmente es algo más complicado, pero sé cómo hacerlo (ya lo he hecho alguna otra vez, tengo que buscar dónde).

El dibujo no se parece mucho al resultado de tu código, pero en fin, creo que lo entiendo. Entonces... ¿se trata de clavar con css lo que dibuja tu código? De acuerdo.

Habrá que currárselo tipo reto, que les tengo mucho cariño a mis dedos, que llevan toda la vida conmigo dándome alegrías

.

Nos veremos

Mikel.

Mikmoro · #21 (**permalink**) 27/03/2008, 16:56

Bien, para FF y IE7 creo que está (si es que por fin he entendido bien). He copiado el diseño de tu código (ya dirás las pegas). Cualquier resolución, cualquier tamaño. Hasta puedes aumentar o reducir el tamaño de letra (Ctrl+):

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulacion tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
text-align: center;
}
#padre {
height: 100%;
position: relative;
}
#uno { border-style: solid solid none;
border-color: rgb(204, 204, 204);
border-width: 1px;
background-color: red;
line-height: 3.2em;
height: 3.2em;
}
#centrado_v { border: 1px solid rgb(204, 204, 204);
text-align: center;
position: absolute;
top: 3.2em;
background-color: blue;
left: 0px;
right: 0px;
bottom: 0px;
}
span { position: relative;
top: 45%;
}
</style>
</head>
<body>
<div id="padre">
<div id="uno">Esta fila tendrá siempre 50px de
alto</div>
<div id="centrado_v"><span>Esta fila
ocupará el resto de alto</span></div>
</div>
</body>
</html>

Ahora vamos a ver qué se puede hacer con el estúpido Explorer 6. No es culpa mia, ni de css, ni de xhmtl; es del estúpido navegador que tantos problemas causa en el diseño web.

Mikel.

Mikmoro · #22 (**permalink**) 27/03/2008, 18:03

Y creo que esto podría valer para IE6:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulacion tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
text-align: center;
}
#padre { border: 1px solid rgb(204, 204, 204);
position: relative;
background-color: blue;
height: 99.6%;
}
#uno { border-color: rgb(204, 204, 204);
border-width: 1px;
border-bottom: 1px solid rgb(204, 204, 204);
background-color: red;
line-height: 3.2em;
height: 3.2em;
}
span { position: relative;
top: 40%;
}
</style>
</head>
<body>
<div id="padre">
<div id="uno">Esta fila tendrá siempre 50px de
alto</div>
<div id="centrado_v"><span>Esta fila
ocupará el resto de alto</span></div>
</div>
</body>
</html>

Así que ahora sólo habría que mezclarlos, o bien usar hojas de estilo separadas con un comentario condicional.

No sé si quedará exacto exacto a lo que tú querías, pero es que esto así, en abstracto, sin un contexto concreto resulta más difícil hacer con precisión lo que tú estás imaginando.

Y ya hablando de esto... ¿para qué demonios quieres ese diseño? ni me lo imagino. ¿O es que es un reto personal, en lugar de algo real?.

Mikel.

Mikmoro · #23 (**permalink**) 28/03/2008, 01:51

Así que esto sería válido para FF, IE6, IE7 y Opera 9:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulacion tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
text-align: center;
}
#padre { border: none!important;
border: 1px solid rgb(204, 204, 204);
position: relative;
background-color: blue;
height: 100%!important;
height: 99.6%;
}
#uno { border-style: solid solid none!important;
border-color: rgb(204, 204, 204);
border-width: 1px;
border-bottom: 1px solid rgb(204, 204, 204);
background-color: red;
line-height: 3.2em;
height: 3.2em;
}
#padre > #centrado_v { border: 1px solid rgb(204, 204, 204);
text-align: center;
position: absolute;
top: 3.2em;
background-color: blue;
left: 0px;
right: 0px;
bottom: 0px;
}
span { position: relative;
top: 40%;
}
</style>
</head>
<body>
<div id="padre">
<div id="uno">Esta fila tendrá siempre 50px de
alto</div>
<div id="centrado_v"><span>Esta fila
ocupará el resto de alto</span></div>
</div>
</body>
</html>

Aunque pesonalmente me resultaría mucho más limpio sacar los estilos fuera a una hoja de estilo css, y para IE6 poner sus correcciones en su hoja, llamada con un comentario condicional.

Si tuviéramos un caso real donde aplicarlo (una web funcionando con todos sus contenidos), se podría ser mucho más preciso con los ajustes, pero así a lo bruto, creo que está lo bastante ajustado, aunque siempre se puede precisar.

Mikel.

Urotsuki · #24 (**permalink**) 28/03/2008, 03:47

Hola Mikel,

es cierto que tu código replica bastante bien el de la tabla, enhorabuena te podrás dejar intactos los dedos!

De todas formas no soluciona el problema de fondo, que es lo que intentaba explicarte hace cuatro posts.

El problema de fondo es que necesito un div que ocupe todo el resto de pantalla menos los 50px iniciales del div que hace de "header". El diseño que te he pasado es esquemático, tú me dices: ¿para qué quieres el div? Pues para poner muchas cosas dentro. Es un layout. Por lo tanto que centres el texto con un position relative al 40% replica mi código, pero no resuelve el problema. Igual era un ejemplo malo, imagínate que en vez del texto en el segundo div pongo una imagen que quiero que ocupe toda la pantalla menos el header (en mi código sería una imagen con width 100%, height 100% dentro de la segunda fila).

El objetivo es replicar el comportamiento real de la tabla, esto es, poder tener un contenedor (en mi código, la segunda fila de la tabla) que ocupe toda la pantalla menos los 50px iniciales para poder poner cosas dentro y que ocupen todo el espacio. Eso es lo que nadie hasta el momento ha podido replicar con divs.

Mikmoro · #25 (**permalink**) 28/03/2008, 04:47

Cita:

Iniciado por Urotsuki

Hola Mikel,

es cierto que tu código replica bastante bien el de la tabla, enhorabuena te podrás dejar intactos los dedos!

De todas formas no soluciona el problema de fondo, que es lo que intentaba explicarte hace cuatro posts.

El problema de fondo es que necesito un div que ocupe todo el resto de pantalla menos los 50px iniciales del div que hace de "header". El diseño que te he pasado es esquemático, tú me dices: ¿para qué quieres el div? Pues para poner muchas cosas dentro. Es un layout. Por lo tanto que centres el texto con un position relative al 40% replica mi código, pero no resuelve el problema. Igual era un ejemplo malo, imagínate que en vez del texto en el segundo div pongo una imagen que quiero que ocupe toda la pantalla menos el header (en mi código sería una imagen con width 100%, height 100% dentro de la segunda fila).

El objetivo es replicar el comportamiento real de la tabla, esto es, poder tener un contenedor (en mi código, la segunda fila de la tabla) que ocupe toda la pantalla menos los 50px iniciales para poder poner cosas dentro y que ocupen todo el espacio. Eso es lo que nadie hasta el momento ha podido replicar con divs.

Ya has comprobado que decir "no se puede hacer" es mucho decir.

Por supuesto que esto resuelve el problema de fondo: si pensabas poner una imagen de fondo para llenar el "layout", y luego muchos más componenetes dentro, ¿para qué me pones que quieres el texto centrado (ya sabía yo)? Es lo más complicado. Si no quieres ese texto centrado verticalmente, es todo bastante más sencillo.
Como te he dicho, esto puesto en un caso real, con contenidos en ese "layout", es más sencillo. Y esta vez me juego 2 dedos (que me he levantado valiente).

No te darás cuenta, pero esto que pides es una de las cosas más básicas de css. Quizá en ningún foro te han dado la respuesta porque no has planteado bien la pregunta. ¿Quieres una cabecera de 50px, y luego un cuerpo que ocupe el resto de la págna hasta completar siempre el 100% de la misma, tenga el contenido que tenga? Esto es el ABC de los "layuot" en css. Quizá te ha obnubilado el hecho de partir de las tablas y de venir del diseño con tablas, pero si lo replanteas, es como te digo, Sota, Caballo y Rey; el ABC de css.

De verdad, si lo quieres aplicar a un caso real, olvídate de tu planteamiento con las tablas, empieza de cero y pregunta cómo hacer ese "layout" que necesitas. Te aseguro que o yo o mucha más gente te prodrá ayudar y conseguir exactamente lo que quieres.

Saludos.

Mikel.

David24 · #26 (**permalink**) 28/03/2008, 04:57

Hola Mikel,

Veo que lo has conseguido, pero no entiendo para que sirven los 99.6% para IE6. tienen alguna razón o está puesto a güevo.

Sigo pensando como antes, creo que es extremadamente difícil realizar esto con capas. Algo que con tablas son 5 min, esto puede resultar varias horas.

Por ejemplo ahora que tenemos hecho esto, si quiero incorporar una fila más en el footer, de las mismas caracteristicas que el header, o si además quiero incorporar una nueva fila debajo del header de 15px,...

Bueno no hace falta que me des la solución a esto, a lo que voy es que el tiempo empleado en realizar esto y comprobar que es compatible con IE6, IE7, FF, Opera, Safari,... es muy superior a hacerlo con tablas y la pregunta es ¿merece la pena?.

Saludos

Urotsuki · #27 (**permalink**) 28/03/2008, 05:01

Mikel,

me dices que es muy simple pero sigues sin darme la solución. ¿Te acuerdas del div aquel que te puse llamado "estees" con fondo rojo en tú codigo hace unos cuantos posts? Si consigues que ESE div ocupe el resto de la pantalla menos el header, habrás conseguido lo que busco. Despreocúpate del contenido que vaya a tener el div, simplemente haz que el div ocupe todo el alto menos los 50px. ESE es el problema que intentamos resolver.

No te puedo poner código real porque no hay código real. Lo que intentamos averigüar es si utilizando divs se puede emular el comportamiento de las celdas de una tabla, en el sentido de que si no se le especifica el alto o el ancho automáticamente se redimensiona hasta ocupar todo el tamaño disponible. Hasta ahora no ha visto a nadie en ningún sitio que sepa cómo hacerlo, ni creo que lo vaya a ver porque veo bastante claro que simplemente NO se puede hacer.

Mikmoro · #28 (**permalink**) 28/03/2008, 05:24

Cita:

Iniciado por David24

Hola Mikel,

Veo que lo has conseguido, pero no entiendo para que sirven los 99.6% para IE6. tienen alguna razón o está puesto a güevo.

Sigo pensando como antes, creo que es extremadamente difícil realizar esto con capas. Algo que con tablas son 5 min, esto puede resultar varias horas.

Por ejemplo ahora que tenemos hecho esto, si quiero incorporar una fila más en el footer, de las mismas caracteristicas que el header, o si además quiero incorporar una nueva fila debajo del header de 15px,...

Bueno no hace falta que me des la solución a esto, a lo que voy es que el tiempo empleado en realizar esto y comprobar que es compatible con IE6, IE7, FF, Opera, Safari,... es muy superior a hacerlo con tablas y la pregunta es ¿merece la pena?.

Saludos

1.- El 99.6% es porque tiene borde y hay que descontarlo del 100%; si no lo tuviera sería un 100% sin más.

2.- Como ya he dicho, si quisieras poner más cosas dentro habría que estudiar el caso concreto y resolverlo. Le doy la vuelta a la pregunta: si con las tablas quisieras hacerlo válido, accesible, disponible para lectores de pantalla para ciegos, navegadores de terminal, etc... ¿cómo lo harías?

3.- ¿Si merece la pena? A esto no respondo yo: responde la W3C, la ONCE y un millón de expertos en diseño web. Habría que definir el término "merecer la pena", que es un tanto ambiguo.

Esto ha sido sólo un divertimento para mi, no dar en los morros a nadie. Cada uno diseña las cosas como quiere según sus criterios y prioridades. No tengo ningún problema en que se diseñe con tablas. Cada uno elige.

Mikel.

Mikmoro · #29 (**permalink**) 28/03/2008, 05:45

Cita:

Iniciado por Urotsuki

Mikel,

me dices que es muy simple pero sigues sin darme la solución. ¿Te acuerdas del div aquel que te puse llamado "estees" con fondo rojo en tú codigo hace unos cuantos posts? Si consigues que ESE div ocupe el resto de la pantalla menos el header, habrás conseguido lo que busco. Despreocúpate del contenido que vaya a tener el div, simplemente haz que el div ocupe todo el alto menos los 50px. ESE es el problema que intentamos resolver.

¿Darte la solución? Suena un poco...

Me acuerdo de ese div, pero creo que hay una pequeña confusión en cuanto al concepto de las cajas: estás convencido de que necesitas una caja de cabecera y luego pegada a ella otra caja con el resto del contenido que ocupe el 100% del resto, pero no es así. Esto se soluciona de forma mucho más sencilla de la primera forma que te puse. ¿Qué te importa que la caja del contenido ocupe el 100%, y luego dentro de ella y sobre ella esté el header? No hay el más mínimo problema para hacerlo así, siempre que luego sepas acomodar el resto del contenido sin problemas.

Cita:

No te puedo poner código real porque no hay código real.

Pues eso, lo que te decía: aplicado a un caso real hay solución, te lo garantizo. ¿Una solución universal de "layout" a lo que pides sin aplicación real? por supuesto que sí: el primer caso que te puse.

Cita:

Lo que intentamos averigüar es si utilizando divs se puede emular el comportamiento de las celdas de una tabla, en el sentido de que si no se le especifica el alto o el ancho automáticamente se redimensiona hasta ocupar todo el tamaño disponible. Hasta ahora no ha visto a nadie en ningún sitio que sepa cómo hacerlo, ni creo que lo vaya a ver porque veo bastante claro que simplemente NO se puede hacer.

No te molestes pero, si tan convencido estás de que "NO se puede hacer", no deberías molestarte en buscar. Ya tienes la solución y no hay más.

Cuando tenga un rato te demostraré con un caso real que SÍ se puede hacer, pero no igual de la forma que tú imaginas, sino consiguiendo exactamente el resultado que buscas, esté hecho como esté hecho. Aunque si no te interesa lo dejamos y listo.

Mikel.

Mikmoro · #30 (**permalink**) 28/03/2008, 06:04

Bueno, quiero puntualizar una cosa:

- ¿Se puede hacer con xhtml+css (sin tablas) un layout que tenga primero una caja header de un tamaño determinado y luego otra caja seguida con el 100% del resto de la página? SÍ, para todos los navegadores menos para IE6 y anteriores (que está por ver).

Esto ya estaba puesto en los anteriores ejemplos: hacer puramente el "layout" del que hablamos, con una caja de header y otra para el resto, colocada debajo y al 100% del resto es sencilíiiiiiisimo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulacion tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
}
#header { height: 50px;
background-color: red;
line-height: 3em;
}
#resto { top: 50px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="header">Esta fila tendrá siempre 50px de alto</div>
<div id="resto"><br/>Esta fila ocupará el resto de alto</div>
</body>
</html>

Claro está, para Firefox, Opera, Camino, IE7, Safari, etc.
El problema es conseguir esto para el estupido IE6 y anteriores, pero sinceramente, empiezo a estar hasta las narices de adaptar todo en especial para un navegador que no respeta los estándares ni las recomendaciones universales.

- ¿Se puede conseguir con xhtm+css (sin tablas) el mismo efecto visual, manteniendo una caja header y otra caja con el resto del contenido que ocupe el 100% del resto de la página? SÍ

Quizá esto sea más exacto con respecto a tu consulta.

Mikel.

P.D.: David24, mira la cantidad de código y dime si es más "caro" o más "económico" que con tablas.