DIV Fijo con Cualquier Resolucion Pantalla

Deiv · #1 (**permalink**) 03/08/2009, 13:19

Hola,
De tantas sugerencias que existen en la Web sobre cómo colocar un DIV fijo para IE6, este me pareció el mejor:

Código PHP:

  <HEAD> 
<STYLE type=text/css> 
#elemento_fijo { 
    POSITION: fixed; TOP: 96&#37;;   /*POSITION: fixed; TOP: 555px;*/ 
    border:1px solid #000;  background:#cff;  
} 
* HTML #elemento_fijo { 
    POSITION: absolute; ; TOP: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+580+"px" : body.scrollTop+580+"px") 
} 
</STYLE> 
</HEAD> 
 
<BODY> 
<DIV id=contenido> 
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</P> 
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</P> /*COLOCAR MUCHO TEXTO*/ 
<P>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</P> 
</DIV> 
<DIV id=elemento_fijo>Fijo 
</DIV> 
</BODY>

Este <style> funciona muy bien para IE6, el único "problemita" radica aquí:
document.documentElement.scrollTop+580+"px" : body.scrollTop+580+"px"
La posición 580px es solo una Idea = Para una Resolución: 1024x768 el DIV se ve muy bien.
El DIV se va a fijar en un Top de 580px (posición fija) pero cuando se ve en otro tipo de RESOLUCIÓN de Pantalla, el DIV siempre se va a ver en esa posición, y no en la parte inferior como Yo deseo.
1.- Lo que necesito es cambiar el código no con "px", sino que con "%" así como lo hice para IE7 (POSITION: fixed; TOP: 96%;)
Y realmente no sé cómo hacerlo, porque no conozco muy bien las otras instrucciones que pudieren tener el document.documentElement.scrollTop y el body.scrollTop para este efecto, pensaba que quizá existe una instrucción como "+ ScreenHeight" por ejemplo.
2.- El otro problema es que cuando se desactiva los: Botones Standard, Barra de Direcciones, Barra de Estado, es otro problema ya que no se FIJA como debe ser en la parte Inferior el DIV, sino que se descoloca, pensaba quizá con una Instrucción algo así como: Screen.Cliente.Height (es un invento) por ejemplo, y esa es otra pregunta.

¿Alguien podría indicarme por favor cómo modificar este STYLE en esa línea para que mi DIV fijo siempre se vea en la parte inferior ante cualquier resolución de Pantalla en IE6?
Recurro a vuestras experiencias sobre el Tema.

Mikmoro · #2 (**permalink**) 03/08/2009, 14:52

Pues yo te voy a responder lo mismo que MasterXNicoX intenta responder en el hilo del que surge tu duda, al que parece que nadie hace caso: mírate esta FAQ de CSS, a ver si te sirve.
Quizá no sea ese el caso que quieres conseguir y no te entiendo bien o no te explicas del todo bien.

Deiv · #3 (**permalink**) 04/08/2009, 08:20

Bueno,
Justamente ese ejemplo está perfecto y funciona en IE7 y otros Navegadores, pero el único "problemita" es que no funciona en IE6, por ello había mostrado las líneas

Código PHP:

  <STYLE type=text/css>  
* HTML #elemento_fijo {  
    POSITION: absolute; ; TOP: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+580+"px" : body.scrollTop+580+"px")  
}  
</STYLE>

Se puede ver que aqui se trabaja en pixels, que al cambiar de Resolución de Pantalla (mas Altas), lo que sucede es que ya no se la ve como pie, sino que se la ve un poco flotando en la parte inferior casi llegando al medio.
De alguna manera pedí orientación al respecto para que este código u otro, tambien funcione en IE6.

Mikmoro · #4 (**permalink**) 04/08/2009, 08:42

¿Estás seguro de que no funciona en IE6? Está testeado desde el mismo día que se hizo, y funciona perfectamente.

Si estás completamente seguro no sé a qué se deberá el error, pero yo te garantizo que en mi IE6 (y el de otra mucha gente) funciona perfectamente. Ha habido de hecho hilos enteros y buenas discusiones a raiz de este asunto, que se han resuelto de esta manera.

Deiv · #5 (**permalink**) 04/08/2009, 10:35

Cita:

Iniciado por Mikmoro

¿Estás seguro de que no funciona en IE6?

Pues sí, en esta mañana he entrado a 2 Cybers para probar el ejemplo de:
http://www.araudi.net/forosdelweb/pi...re_abajo.html#
y ambos Cybers tienen la v6.0.2900.2180.xpsp.051011-1528 del IE
y simplemente lo expulsa al DIV hacia abajo y no se matiene fijo, cuando clicko aumentar mas texto en dicha pçagina.
Por otro lado también probé el ejemplo en Casa offline, y ocurre lo mismo.
No entiendo a que se deberá el error de mal funcionamiento.
Yo pregunto lo mismo, en este momento ¿HOY?, lo probaste?
No se si tiene algo que ver la instrucción: !important ???

kseso? · #6 (**permalink**) 04/08/2009, 11:40

Deiv, ese ejemplo que enlazas mantiene el pie abajo hasta que el contenido es mayor que el alto de la ventana, momento en que sigue el fujo del documento. Es la premisa sobre la que está realizado, probado y utilizado.

Si lo que andas buscando es la posición 'fixed' en la parte inferior de la ventana compatible con ie6 con independencia del contenido, también hace tiempo que está resuelta utilizando sólo css.

Sólo tienes que buscar algo más a fondo en este foro de css.

Y por cierto, no se la razón de publicar tu ejemplo en css, cuando utilizas js y tú mismo adviertes que sólo funciona en un caso muy concreto.

EDITO PARA AMPLIAR:
Casualmente, acabo de encontrarme en cssblog otro método (pero que nada tiene que ver con css) en la línea que apuntabas, pero usando la expresión de Internet Explorer ; “eval”.
Se puede ver aquí

Mikmoro · #7 (**permalink**) 04/08/2009, 14:55

Cita:

Iniciado por Deiv

Yo pregunto lo mismo, en este momento ¿HOY?, lo probaste?

No lo probé: lo hice

Efectivamente ha sido un problema de entendimiento: en el otro hilo donde comenzabas tu cuestión, el usuario vidalsoft lanzaba la cuestión con el título: "footer siempre abajo", y eso es exactamente lo que hace mi ejemplo y lo que es foco de discusión: mantener el pie siempre abajo, debajo del contenido, sea éste poco o mucho (justo la fuente de controversia: "cómo mantener el pie abajo cuando hay poco contenido, y que acompañe a éste cuando crezca para seguir apareciendo al final y que no quede montado sobre el mismo".

Bien, lo que tú planteabas no era lo mismo que la consulta inicial a la que ofrecías una posible solución, sino cómo mantener el pie fijo siempre al final de área de visión, haya el contenido que haya.
Efectivamente esto es problemático con IE6 porque no entiende el fixed, pero también hemos hecho ejemplo con CSS para solucionarlo hace bastante tiempo, como este o este

Prueba cómo extrapolar eso a colocar el pie abajo en lugar de en el centro y resuelto.

Deiv · #8 (**permalink**) 05/08/2009, 11:31

Bueno sí, hubo un malentendido a mis preguntas. Deseaba un DIV fijo en la parte inferior (FIXED), no un DIV siempre al pie con cualquier tamaño del texto.

El ejemplo del bloque CELESTE lo encontré también en otro lugar, la cuestión es que como planteé en un principio viene en "px", y Yo prefiero algo como en "%", de todos modos probaré con la otra opción más y ya les aviso, ok?

Mikmoro · #9 (**permalink**) 05/08/2009, 11:49

¿El qué es en px o porcentaje? No he entendido eso. Si quieres que intentemos encontrar una solución a lo que planteas especifica con exactitud y seguro que varios nos pondremos gustosamente a mirarlo contigo.

Deiv · #10 (**permalink**) 07/08/2009, 06:54

Haber,
Yo (para mis conocimientos de Novato) entiendo que cuando las medidas se coloca en pixels, es eso, cuenta pixel a pixel, en una resolución de pantalla 1024x768 el código de abajo en "px" (555px) se posiciona bien en la parte inferior (para mi ejemplo). O lo mismo que +580+"px" para IE6, perfecto,

Código PHP:

  #elemento_fijo {  
    POSITION: fixed; TOP: 96%; /*POSITION: fixed; TOP: 555px;*/  
    border:1px solid #000;  background:#cff;   
}  
* HTML #elemento_fijo {  
    POSITION: absolute; ; TOP: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+580+"px" : body.scrollTop+580+"px")  
}

pero cuando cambio a resoluciones mayores, esta posición en px no se acomoda justo en el pie (como intento diseñar), por ejemplo en la línea:

Código PHP:

  POSITION: fixed; TOP: 96%; /*POSITION: fixed; TOP: 555px;*/

ese 96% para IE7 en cualquier resolución me va bien, no me sirve 555px para resoluciones más altas o más bajas diferentes a 1024x768.
Por todo ello prefiero manejar en "porcentaje" y realmente no sé como cambiar eso en la línea:

Código PHP:

  POSITION: absolute; ; TOP: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+580+"px" : body.scrollTop+580+"px")

Espero haberme explicado mejor, quiero que esas medidas en px tenga una "traducción" a "porcentaje" por favor.
Gracias.

Mikmoro · #11 (**permalink**) 07/08/2009, 09:07

Si el tamaño del objeto no es también un porcentaje relativo al anto de la pantalla, es imposible que eso funcione para cualquer resolución, porque en unos casos el 96% será pequeño debido al tamaño en sí del objeto y en otros grande.

Pero vamos, no obstante, eso que pones, si vas a usar la posición absoluta tiene una solución infinitamente más sencilla: bottom: 0; , lo que significa que no tomes las distancia desde arriba, sino desde abajo, de tal manera que siempre esté pegado abajo.

Si no es eso es que sigo sin entenderlo.

Mikmoro · #12 (**permalink**) 07/08/2009, 09:15

Veamos: ¿tú en este ejemplo basado en el anterior no ves el pie fijo abajo tanto en IE6 como en FF en cualqueir resolución?

Deiv · #13 (**permalink**) 08/08/2009, 06:40

Sí,
Realmente después de alguna confusión a mi post inicial, ese es el ejemplo que necesitaba, funciona perfectamente en IE6 y para cualquier resolución verdaderamente.
A pesar que Yo en un principio hice pruebas con ese código (algo debió pasar) no pude obtener el mismo resultado como el último ejemplo que enviaste
Gracias, les quedo agradecido a todos, especialmente a ti Mikmoro por haber seguido el hilo hasta encontrarme una solución.
Tema Cerrado.

Mikmoro · #14 (**permalink**) 08/08/2009, 09:42

Me alegro. Efectivamente era un asunto de falta de entendimiento.

Saludos.

Saiyo · #15 (**permalink**) 16/10/2009, 09:34

para que quede abajo puedes utilizar la expresión clientHeight en vez de scrollTop, tu ejemplo me sirvió muchisimo y para darle un alto al 100% utilice esto

Cita:

height: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientHeight+"px" : body.clientHeight+"px");