Foros del Web - Css y pestaña de Firefox

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Css y pestaña de Firefox (http://www.forosdelweb.com/f53/css-pestana-firefox-497079/)

bejarano

11/06/2007 11:55

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.

JavierB

11/06/2007 12:01

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, :adios:

bejarano

11/06/2007 14:01

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

webosiris

12/06/2007 07:06

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 :borracho:).. 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/06/2007 08:54

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, :adios:

bejarano

13/06/2007 05:47

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.

pzin	13/06/2007 06:12

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.

La zona horaria es GMT -6. Ahora son las 17:11.