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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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
1 2 3 4 5 6 7 8 9 10 11 |
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«.
9 de julio de 2008 a las 12:42