Foros del web, para los que viven de bits

Urotsuki · 15-feb-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 · 15-feb-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 · 19-feb-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 · 19-feb-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 · 21-feb-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 · 21-feb-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 · 21-feb-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 · 22-feb-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 · 27-feb-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 · 05-mar-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 · 20-mar-2008, 07: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 · 27-mar-2008, 09: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 · 27-mar-2008, 10: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 · 27-mar-2008, 12: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 · 27-mar-2008, 12: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 · 27-mar-2008, 13: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 · 27-mar-2008, 13: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 · 27-mar-2008, 13: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 · 27-mar-2008, 14: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 · 27-mar-2008, 14: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 · 27-mar-2008, 17: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 · 27-mar-2008, 19: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;
bord

15-feb-2008, 11:02	#1 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Problemas con el height de las filas en IE7 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!

15-feb-2008, 13:40	#2 (permalink)
hades87 Fecha de Ingreso: diciembre-2007 Ubicación: Barcelona - España Mensajes: 1.371	Re: Problemas con el height de las filas en IE7 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 __________________ Desarrollador web por amor al arte

19-feb-2008, 09:11	#3 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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).

21-feb-2008, 05:22	#5 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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).

21-feb-2008, 06:30	#6 (permalink)
hades87 Fecha de Ingreso: diciembre-2007 Ubicación: Barcelona - España Mensajes: 1.371	Re: Problemas con el height de las filas en IE7 pues si lo quieres de 30px de alto, cambiale la altura: height:50px; y además te aconsejo mirarte un tutorial de css __________________ Desarrollador web por amor al arte

21-feb-2008, 13:03	#7 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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.

22-feb-2008, 04:49	#8 (permalink)
hades87 Fecha de Ingreso: diciembre-2007 Ubicación: Barcelona - España Mensajes: 1.371	Re: Problemas con el height de las filas en IE7 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%... __________________ Desarrollador web por amor al arte

27-feb-2008, 08:00	#9 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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.

05-mar-2008, 10:28	#10 (permalink)
David24 Fecha de Ingreso: septiembre-2003 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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

20-mar-2008, 07:41	#11 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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 Última edición por Urotsuki; 20-mar-2008 a las 10:32.

27-mar-2008, 10:14	#13 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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).

27-mar-2008, 12:26	#14 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: K-pax Mensajes: 4.999	Re: Problemas con el height de las filas en IE7 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.

27-mar-2008, 12:51	#15 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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á el resto de alto<br/> Esta fila ocupará 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)

27-mar-2008, 13:39	#16 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: K-pax Mensajes: 4.999	Re: Problemas con el height de las filas en IE7 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.

27-mar-2008, 13:54	#18 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: K-pax Mensajes: 4.999	Re: Problemas con el height de las filas en IE7 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.

27-mar-2008, 14:09	#19 (permalink)
Urotsuki Fecha de Ingreso: febrero-2008 Mensajes: 14	Re: Problemas con el height de las filas en IE7 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 )

27-mar-2008, 14:17	#20 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: K-pax Mensajes: 4.999	Re: Problemas con el height de las filas en IE7 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.

27-mar-2008, 17:56	#21 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: K-pax Mensajes: 4.999	Re: Problemas con el height de las filas en IE7 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.