Otro blog más de diseño
Siempre he pensado que las buenas ideas o soluciones a problemas estaban ahí, al lado nuestra, y que además no eran complicadas. Solo hay que pensar con claridad y pensar en algo simple.
Vía divinentd, me encuentro con un código muy, muy simple, que consigue el efecto “fixed” para todos los navegadores.
Estos serían las css
html, body {
height: 100%;
overflow: hidden;
}
#container {
height: 100%;
overflow: auto;
position: relative;
z-index: 2;
}
#div1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#div2 {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
#div3 {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
#div4 {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
Y esta, un ejemplo de estructura
<div id="container">
<div id="content">
<h1>Emulando position: Fixed;</h1>
<p>Añade un texto</p>
<p>O tu contenido...</p>
</div>
</div>
<div id="div1">div id="div1</div>
<div id="div2">div id="div2</div>
<div id="div3">div id="div3</div>
<div id="div4">div id="div4</div>
Lo que estamos haciendo realmente es permitir que el contenido alcance el 100% de alto desde el body y escondiendo el scroll con la propiedad overflow. A continuación, entra en escena la capa contenedora, que se prolonga hasta el 100% del documento, y permitimos el uso del scroll, de forma que da la sensación de que el scroll pertenece al body.
Y ya entonces es cuando creamos la capa o capas con la que queremos emular el position:fixed. Su posición pasa a ser absoluta con respecto al body, de forma que solamente se generará la barra de scroll desde la capa contenedora. Simple, útil y sin hacks.
La única limitación que le veo es que al generarse scroll, el contenido de la capa contenedora se mueve un poco (la mitad del ancho de la barra de scroll), mientras que los elementos que emulen a la posición fixed siguen en su lugar. Esto podría llegar a generar un pequeño desfase en la colocación de algún elemento. Por lo que como dicen en la tele, “Úsese con moderación“.
Qué puedo decir de mi que no se haya dicho ya antes.
Skeku
Julio 9th, 2008 el 12:42 pm
En efesto. Es algo que tuve que usar yo para montar mi portfolio salchichero. Pensé que era algo que me iba a dar más quebraderos de cabeza pero solucioné la papeleta. Compatible con el querido IE6 y todo!
cmacias
Julio 9th, 2008 el 12:55 pm
iE6, esa es la clave !! El día que dejen de haber iE6 en todos los ordenadores con conexión a internet del mundo, empezaré a dormir y a trabajar tranquilo
Maycol Alvarez
Agosto 15th, 2008 el 6:41 pm
No me lo van a creer pero en IE 7, basta con colocar:
al principio del archivo!!!, pruebenlo y verán, solo basta probarlo en IE 6.1 que es el que habilitó “fixed”, me avisan: maycolalvarez@gmail.com
Maycol Alvarez
Agosto 15th, 2008 el 6:42 pm
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”
NOTA: lo anterior va como una etiqueta sin cierre
gabriel
Septiembre 18th, 2009 el 1:25 am
pos no le entendi sniffff