Foros del web, para los que viven de bits

bejarano · 11-jun-2007, 11:55

Hola a todos, tengo un problemilla con el Firefox. Estoy desarrollando una web, en la que tengo controlado mediante CSS que ocupe el 100% en altura y en anchura.

Hasta aqui todo perfecto, funciona tanto en IE como en Firefox. El problema ocurre cuando abro una pestaña más en firefox. Al tener abiertas 2 pestañas sale una barra horizontal con las 2 pestañas (con una sola no ocurre), el caso es que esa barra come como es lógico ocupa un cacho del área visible del navegador y mi página sigue ocupando lo mismo, por lo cual sale un scroll vertical con un desplazamiento igual al ancho de la barra de las pestañas.

¿Por qué no se me ajusta el ancho del 100% a la nueva situación para que no aparezca el scroll? ¿Hay alguna solución a este tipo de cambios?

PD: lo mismo me ocurre en Firefox cuando muestro la barra de búsqueda que sale abajo (Ctrl+F)

A ver si alguien sabe la solución o se le ocurre como solventarlo. Gracias por anticipado.

JavierB · 11-jun-2007, 12:01

Hola bejarano

Prueba este ejemplo:

Código:

<html>
<head>
<style type="text/css">
body, html {height:100%}
</style>
</head>
<body>
<div style="width:100%; height:100%; border:1px solid red"></div>
</body>
</html>

Se ve igual, con pestañas, sin pestañas, con barra de búsqueda, con barra de marcadores...

Saludos,

bejarano · 11-jun-2007, 14:01

Hola JavierB, gracias por contestar tan pronto.

Cita:

body, html {height:100%}

Yo usaba también ese código, pero no me funcionaba. He puesto tu código tal cual lo has escrito en un nuevo documento y al mostrarlo me ocurre lo mismo que con el mío. La parte de abajo del rectángulo rojo no se me muestra. (Si hace falta puedo poner una captura).

Antes no lo he dicho, pero creo que viene "de serie" con el Firefox, encima de las pestañas tengo otra barra con unos "RSS", pero no creo que afecte en este asunto ¿o si?

De todas formas gracias JavierB, a ver si localizamos la solución.

Un saludo

webosiris · 12-jun-2007, 07:06

el código de javier no te va a funcionar porque eso siempre va a medir + del 100%... concretamente 100% + 2px (el ancho de los bordes

).. probá con esto:

Código HTML:

<html>
<head>
<style type="text/css">
body, html {height:100%}
</style>
</head>
<body>
<div style="width:100%; height:100%; background:#333"></div>
</body>
</html>

La "teoría" de Javier funciona, de eso estoy seguro.. el 100% es siempre el 100% de la ventana visible, así que no se "deforma" con barras ni nada por el estilo..

JavierB · 12-jun-2007, 08:54

Gracias por la corrección webosiris, siempre me olvido del modelo de cajas de los navegadores.

Ahora habría que añadir otro pequeño detalle:

Código:

body, html {height:100%; margin:0}

Saludos,

bejarano · 13-jun-2007, 05:47

Hola webosiris y javierB. Muchas gracias a ambos. He estado "acoplando" vuestras sugerencias y funciona correctamente.

El fallo debías ser que tenía puesto

Código:

html,body {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center;
   background-color: green;
   height:100%;
   margin:0;
   padding:0;
}

sin lo que está en rojo. Para cerrar ya el tema y que me quede claro (o al menos eso espero), ¿es aconsejable añadir al html y body la propiedad de margin y padding en rojo siempre o es para evitar problemas con los navegadores?

Muchas gracias por ayudarme a aprender con explicaciones tan claras.
Un saludo.

Bonez · 13-jun-2007, 06:12

Yo siempre lo añado, porque hay navegadores que difieren con las medidas. Es una especie de reseteo, y luego ya poner las medidas que se necesitan.

11-jun-2007, 11:55	#1 (permalink)
bejarano Fecha de Ingreso: julio-2004 Mensajes: 117	Css y pestaña de Firefox Hola a todos, tengo un problemilla con el Firefox. Estoy desarrollando una web, en la que tengo controlado mediante CSS que ocupe el 100% en altura y en anchura. Hasta aqui todo perfecto, funciona tanto en IE como en Firefox. El problema ocurre cuando abro una pestaña más en firefox. Al tener abiertas 2 pestañas sale una barra horizontal con las 2 pestañas (con una sola no ocurre), el caso es que esa barra come como es lógico ocupa un cacho del área visible del navegador y mi página sigue ocupando lo mismo, por lo cual sale un scroll vertical con un desplazamiento igual al ancho de la barra de las pestañas. ¿Por qué no se me ajusta el ancho del 100% a la nueva situación para que no aparezca el scroll? ¿Hay alguna solución a este tipo de cambios? PD: lo mismo me ocurre en Firefox cuando muestro la barra de búsqueda que sale abajo (Ctrl+F) A ver si alguien sabe la solución o se le ocurre como solventarlo. Gracias por anticipado.

11-jun-2007, 12:01	#2 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.549	Re: Css y pestaña de Firefox Hola bejarano Prueba este ejemplo: Código: <html> <head> <style type="text/css"> body, html {height:100%} </style> </head> <body> <div style="width:100%; height:100%; border:1px solid red"></div> </body> </html> Se ve igual, con pestañas, sin pestañas, con barra de búsqueda, con barra de marcadores... Saludos, __________________ Lee las Políticas de los foros y escribe correctamente.

11-jun-2007, 14:01	#3 (permalink)
bejarano Fecha de Ingreso: julio-2004 Mensajes: 117	Re: Css y pestaña de Firefox Hola JavierB, gracias por contestar tan pronto. Cita: body, html {height:100%} Yo usaba también ese código, pero no me funcionaba. He puesto tu código tal cual lo has escrito en un nuevo documento y al mostrarlo me ocurre lo mismo que con el mío. La parte de abajo del rectángulo rojo no se me muestra. (Si hace falta puedo poner una captura). Antes no lo he dicho, pero creo que viene "de serie" con el Firefox, encima de las pestañas tengo otra barra con unos "RSS", pero no creo que afecte en este asunto ¿o si? De todas formas gracias JavierB, a ver si localizamos la solución. Un saludo

12-jun-2007, 07:06	#4 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 6.068	Re: Css y pestaña de Firefox el código de javier no te va a funcionar porque eso siempre va a medir + del 100%... concretamente 100% + 2px (el ancho de los bordes ).. probá con esto: Código HTML: <html> <head> <style type="text/css"> body, html {height:100%} </style> </head> <body> <div style="width:100%; height:100%; background:#333"></div> </body> </html> La "teoría" de Javier funciona, de eso estoy seguro.. el 100% es siempre el 100% de la ventana visible, así que no se "deforma" con barras ni nada por el estilo.. __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código.

12-jun-2007, 08:54	#5 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.549	Re: Css y pestaña de Firefox Gracias por la corrección webosiris, siempre me olvido del modelo de cajas de los navegadores. Ahora habría que añadir otro pequeño detalle: Código: body, html {height:100%; margin:0} Saludos, __________________ Lee las Políticas de los foros y escribe correctamente.

13-jun-2007, 05:47	#6 (permalink)
bejarano Fecha de Ingreso: julio-2004 Mensajes: 117	Re: Css y pestaña de Firefox Hola webosiris y javierB. Muchas gracias a ambos. He estado "acoplando" vuestras sugerencias y funciona correctamente. El fallo debías ser que tenía puesto Código: html,body { font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; background-color: green; height:100%; margin:0; padding:0; } sin lo que está en rojo. Para cerrar ya el tema y que me quede claro (o al menos eso espero), ¿es aconsejable añadir al html y body la propiedad de margin y padding en rojo siempre o es para evitar problemas con los navegadores? Muchas gracias por ayudarme a aprender con explicaciones tan claras. Un saludo.

13-jun-2007, 06:12	#7 (permalink)
Bonez Fecha de Ingreso: noviembre-2002 Mensajes: 2.044	Re: Css y pestaña de Firefox Yo siempre lo añado, porque hay navegadores que difieren con las medidas. Es una especie de reseteo, y luego ya poner las medidas que se necesitan.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado