Css y pestaña de Firefox

bejarano · #1 (**permalink**) 11/06/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 · #2 (**permalink**) 11/06/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 · #3 (**permalink**) 11/06/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 · #4 (**permalink**) 12/06/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 · #5 (**permalink**) 12/06/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 · #6 (**permalink**) 13/06/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.

pzin · #7 (**permalink**) 13/06/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.