Hola queridos lectores del sitio del blog. Continuamos con el tema del diseño de bloques, que se inició y continuó en los tres artículos anteriores. Básicamente, ya hemos logrado crear un diseño de sitio web de dos y tres columnas, e incluso logramos considerar los matices de crear un diseño de goma.
Además, en los primeros artículos dedicados a la maquetación del sitio (), se consideraron algunos conceptos básicos de webmastering, sin entender cuál sería bastante difícil de entender los matices.
¿Cuáles son los problemas con el diseño de nuestro sitio web?
Hoy intentaremos resolver un pequeño problema que puede surgir con el diseño que creamos anteriormente. La mayoría de las veces, esta situación ocurre cuando se visualiza en monitores grandes (con alta resolución) y cuando se muestra una página con una pequeña cantidad de información.
En este caso, puede resultar que el pie de página no se presione en la parte inferior de la pantalla, sino que se ubicará casi en su altura media, lo que en la mayoría de los casos se verá feo y no estéticamente agradable.
Sin embargo, en mi opinión, es necesario presionar el pie de página hasta la parte inferior del diseño del sitio, y esto será especialmente cierto en el caso de que la altura de la página resulte ser menor que la altura de la pantalla del usuario. Se puede representar esquemáticamente de la siguiente manera:
Aquellos. el comportamiento correcto del pie de página para el caso de una pequeña cantidad de información en la página y una gran pantalla de usuario sería el siguiente:
Para implementar esto, debe realizar una serie de manipulaciones con el código de nuestro diseño. Además, realizaremos cambios no solo en el archivo CSS de estilo Style.css, sino también en Index.html, que contiene el código Html y forma los bloques Div. Pero lo primero es lo primero.
Por ejemplo, usaremos el diseño del sitio de tres columnas que creamos anteriormente. En este caso, Index.html se verá así:
Y las siguientes propiedades CSS se especificaron en el archivo Style.css:
Body, html (margin: 0px; padding: 0px;) #maket (width: 800px; margin: 0 auto;) #header (background-color: # C0C000;) #left (background-color: # 00C0C0; width: 200px ; float: left;) #right (ancho: 200px; color de fondo: # FFFF00; float: right;) #content (color de fondo: # 8080FF; margin-left: 202px; margin-right: 202px;) #footer (color de fondo: # FFC0FF; claro: ambos;)
Bueno, el diseño en sí se veía así:
Como puede ver, el pie de página no está presionado hasta la parte inferior y, por lo tanto, no cumple con nuestros requisitos (siempre se encuentra debajo de la columna más baja), por lo que deberá realizar ajustes en el código. Lo mismo se puede hacer también para los modelos de dos columnas y de goma. El método es universal.
Cómo colocar un pie de página en la parte inferior del diseño de un sitio web
Por lo tanto, debemos mover el contenedor div con el pie de página a la parte inferior de la pantalla. Para hacer esto, primero debe establecer la altura de toda la página al cien por cien (ocupará toda la pantalla). Esto será necesario para luego cambiar el tamaño del bloque principal con el diseño al 100% también.
Todo el contenido de la página del sitio se coloca en las etiquetas Body de apertura y cierre y, por lo tanto, debemos agregar otra propiedad CSS a la etiqueta Body en Style.css que establece la altura en 100%:
Cuerpo, html (margen: 0px; relleno: 0px; altura: 100%;)
Esto no afectará la apariencia de ninguna manera, pero ahora el blog principal se puede estirar a la altura completa de la pantalla. Aquellos. fue una especie de etapa preparatoria.
Las principales propiedades de CSS, si lo desea, puede consultarlas. Ahora establezcamos el contenedor div, que contiene todo nuestro diseño, a una altura mínima del 100%:
También quiero resaltarlo (div con id \u003d "maket"). Para hacer esto, establezca un borde usando la propiedad Border () apropiada:
La propiedad border: solid 3px black establece el contenedor en un borde negro sólido de 3px. Esto le permitirá ver visualmente que el contenedor con el diseño se ha extendido a la altura completa de la pantalla, incluso con una pequeña cantidad de información en la página:
Ahora necesitaremos sacar el bloque de pie de página del contenedor general y colocarlo debajo, inmediatamente después del general. ¿Qué dará? Y el hecho de que, finalmente, se dignará bajar el pie de página en el trazado, y no se aferrará, como antes, a su columna más larga. En este caso, Index.html se verá así:
Tenga en cuenta que el bloque con el pie de página ya no está dentro del contenedor general (maket) y, por lo tanto, su ancho ya no está controlado por las propiedades CSS establecidas para el maket en el archivo Style.css. El pie de página se extenderá a lo ancho para llenar toda la pantalla, pero aún así, ya estará ubicado en la parte inferior de la pantalla, justo debajo del bloque principal:
Pero nuevamente, surge un problema, porque para ver el pie de página, ahora debe desplazarse por la pantalla en el navegador (puede ver la barra de desplazamiento en la imagen de arriba).
Esto sucede porque el contenedor principal (maket) ocupa todo el tamaño de la pantalla en altura (esto está determinado por la propiedad min-height: 100%), y el pie de página se encuentra inmediatamente detrás de él y tendrá que usar el desplazamiento para verlo, lo cual no es muy conveniente y funcional ...
Una solución a este problema es establecer un margen negativo para el div del contenedor con un pie de página para que se mueva hacia arriba una distancia igual a su altura. En este caso, el contenedor de pie de página se ejecutará sobre el principal y se ajustará a la altura de la pantalla del navegador (es decir, no será necesario utilizar el desplazamiento para verlo).
Pero para establecer un margen negativo desde la parte superior, debe conocer la altura del pie de página, pero aún no lo sabemos.
Por lo tanto, primero establecemos el contenedor que contiene el pie de página a una altura estableciendo la propiedad apropiada en Style.css:
#footer (color de fondo: # FFC0FF; claro: ambos; altura: 50px;)
Y luego establezca un margen superior negativo para él a una altura igual a su altura:
Esto permitirá que el pie de página se eleve exactamente a su propia altura y, por lo tanto, quepa en la pantalla del navegador (ahora podemos eliminar el borde: propiedad CSS negra sólida de 3px de la regla de mercado para que el grosor del borde no interfiera con todo nuestro diseño junto con el pie de página para que quepa en la pantalla en altura) :
Como puede ver, ahora la barra de desplazamiento no aparece en el navegador y todo nuestro diseño de tres columnas basado en el diseño de bloque cabe en una pantalla (en el caso de una pequeña cantidad de información en la página) y tiene un pie de página ubicado en la parte inferior. Lo que, de hecho, teníamos que hacer.
Inserta el espaciador y lucha contra Internet Explorer
Pero hay un problema, que aparecerá solo cuando haya más información en la página de diseño y pueda ocurrir la siguiente situación:
Resulta que puede surgir una situación cuando la información en una de las columnas del diseño se superpone al pie de página, lo que no se verá bien. Esto sucede por el notorio acolchado negativo que le pusimos y que ayudó a levantar nuestro sótano con una colisión con el contenedor principal del diseño.
Aquellos. resulta que dos bloques están ubicados en la parte inferior de la pantalla, superpuestos entre sí en el área del sótano.
La solución a este problema es agregar un nuevo contenedor Div vacío (el llamado espaciadores) en el contenedor principal de nuestro diseño (maket), al lugar donde anteriormente se encontraba el bloque con el pie de página.
Al establecer la altura de este nuevo contenedor a la altura del sótano, podemos evitar la colisión de la información del contenedor principal con el bloque con el pie de página. Démosle a este contenedor un ID () llamado Rasporka y, como resultado, el Index.html de nuestro diseño de tres columnas se verá así:
Y en Style.css, para esto escribiremos (, que establece la altura de este contenedor espaciador igual a la altura del pie de página:
#rasporka (altura: 50px;)
Como resultado, el pie de página no se presionará desde la parte inferior a la información contenida en el contenedor principal (por ejemplo, el texto en la columna más alta), sino a un área igual al pie de página en altura con un contenedor espaciador que no contiene ninguna información.
De esta forma evitamos colisiones y distorsiones en nuestro diseño de tres columnas. Todo será claro y hermoso (decoroso y noble):
Como mencioné anteriormente, el ancho del pie de página ahora debería establecerse por separado para nosotros, porque este contenedor ya no forma parte del principal. Para hacer esto, debe agregar propiedades adicionales para el pie de página al archivo CSS, lo que le permite establecer su ancho y alinearlo horizontalmente en el medio de la pantalla.
Tiene sentido establecer el ancho igual al ancho de todo el diseño usando la propiedad Ancho, y la alineación horizontal se puede hacer de la misma manera que lo hicimos para todo el diseño en un diseño de bloque.
Por lo tanto, necesitaremos agregar propiedades adicionales para el pie de página de ID:
#footer (color de fondo: # FFC0FF; clear: both; height: 20px; margin-top: -20px; width: 800px; margin-left: auto; margin-right: auto;)
El uso de la propiedad width: 800px establece el ancho en 800 píxeles, y el uso de las dos propiedades margin-left: auto y margin-right: auto establece el relleno a la izquierda y a la derecha del pie de página automáticamente, como resultado de lo cual estos rellenos serán iguales y nuestro héroe se alineará con medio:
Bueno, parece que no hay nada más que mejorar, pero no estaba ahí. Como siempre, nuestro navegador favorito Internet Explorer 6 no entiende algo de las propiedades CSS que usamos. En este navegador (y, posiblemente, también en algunos otros antiguos), a pesar de todos nuestros esfuerzos, el pie de página no se presionará hasta la parte inferior, sino que se mantendrá en la columna más alta del diseño del sitio.
Todo esto se debe al hecho de que (no entiende la propiedad min-height: 100%, que usamos para establecer la altura mínima de la caja principal para que sea igual a la altura de la pantalla.
Por tanto, para solucionar este problema, tendremos que aplicar un llamado hack que nos permite explicar (con los dedos) a los navegadores antiguos qué hacer. Antes de la lista de propiedades CSS para maket, deberá insertar la siguiente combinación:
* html #maket (altura: 100%;)
Esta regla se aplicará solo para el navegador Internet Explorer 6, otros no la tendrán en cuenta ni la harán cumplir.
Entonces, el aspecto final de Style.css con el pie de página presionado en la parte inferior de la pantalla será el siguiente:
Cuerpo, html (margen: 0px; relleno: 0px; altura: 100%;) * html #maket (altura: 100%;) #maket (ancho: 800px; margen: 0 automático; altura mínima: 100%;) # header (background-color: # C0C000;) #left (background-color: # 00C0C0; width: 200px; float: left;) #right (width: 200px; background-color: # FFFF00; float: right;) #content (color de fondo: # 8080FF; margen-izquierdo: 202px; margen-derecho: 202px;) #footer (color de fondo: # FFC0FF; claro: ambos; alto: 50px; margen-superior: -50px; ancho: 800px; margin-left: auto; margin-right: auto;) #rasporka (altura: 50px;)
Bueno, la vista final de Index.html se mostró justo arriba. Eso es todo, esta serie de artículos dedicados al diseño de bloques de diseños fijos y fluidos de 2 y 3 columnas del sitio puede considerarse completa.
También puede ver el video "Trabajar con la etiqueta div Html":
¡Buena suerte para ti! Hasta pronto en las páginas del sitio del blog
Tú podrías estar interesado
Diseño de bloque: cree diseños de sitio de dos columnas, tres columnas y fluidos 
Diseño DiV: cree bloques para un diseño de dos columnas en HTML, determine sus tamaños y establezca su posicionamiento en CSS
Cualquiera que esté acostumbrado a las páginas web completas prefiere el aspecto de "clavado" (pegajoso, pegajoso) en la parte inferior del pie de página. Pero hay dos problemas en Internet: los campos de entrada que no bajan y los pies de página que no están clavados (en la parte inferior de la ventana). Por ejemplo, cuando abrimos páginas de poca altura como habrahabr.ru/settings/social, llama la atención de inmediato que la información diseñada para estar en la parte inferior de la ventana gráfica se adhiere al contenido y está en algún lugar en el medio, o incluso en la parte superior de la ventana. cuando abajo está vacío.
Entonces, en lugar de.
Esta guía para diseñadores de maquetación novatos le mostrará cómo hacer un pie de página "clavado" en 45 minutos, corrigiendo los defectos incluso de una publicación tan respetada como Habr, y competir con ella como un cumplimiento de su prometedor proyecto.
Veamos la implementación de un tipo de pie de página clavado tomado de la red y tratemos de averiguar qué está sucediendo. css-tricks.com/snippets/css/sticky-footer
CSS:
* (margin: 0; padding: 0;) html, body, #wrap (height: 100%;) body\u003e #wrap (height: auto; min-height: 100%;) #main (padding-bottom: 150px; ) / * debe tener la misma altura que el pie de página * / #footer (posición: relativa; margen superior: -150px; / * valor negativo de la altura del pie de página * / altura: 150px; claro: ambos;) / * CLEAR FIX * / .clearfix: after (content: "."; display: block; height: 0; clear: both; visibilidad: hidden;) .clearfix (display: inline-block;) / * Se oculta de IE-mac \\ * / * html .clearfix (altura: 1%;) .clearfix (mostrar: bloque;) / * Fin de ocultar de IE-mac * /
HTML:
Empecemos con la teoría
La implementación habitual de un pie de página clavado se basa en la propiedad única de CSS2 de que los elementos son descendientes inmediatos CUERPO - mantener el porcentaje de altura ( altura: 100% u otro) relativo a la ventana, si todos sus padres tienen el mismo porcentaje de altura, comenzando con la etiqueta HTML... Anteriormente, sin doctypes, pero ahora en el modo Quirks, las alturas porcentuales de los elementos se admiten en cualquier nivel y en los doctypes modernos, solo dentro de los elementos porcentuales especificados. Por lo tanto, si hacemos un bloque de contenido (llamémoslo #diseño) con una altura del 100%, se desplazará como si fuera una ventana. Se incluye todo el contenido (de transmisión), excepto el pie de página y quizás el encabezado.Se coloca un pie de página junto a este bloque y se le asignan 0 píxeles de altura. En general, puedes seguir #diseño coloque tantos bloques como desee, pero todos deben tener una altura de 0 píxeles o estar fuera del flujo del documento (no posición: estática). Y hay otro truco importante que se suele utilizar. No es necesario hacer que la altura sea igual a 0. Puede hacer que la altura sea fija, pero restarla del bloque principal usando la propiedad margin-bottom: - (altura);.
En términos humanos, los estilos crean un "bolsillo" vacío en la parte inferior, en el que se inserta el pie de página, y siempre resulta estar adherido al borde inferior de la ventana o al borde inferior del documento si el documento tiene una altura superior a la de la ventana. Hay muchas implementaciones de pie de página en Internet y en Habré, con éxito variable en todos los navegadores. Sigamos construyéndolo por nuestra cuenta, usando el diseño de Habr como un "caballo de batalla".
Desde el fondo del bloque #diseño - este es un bolsillo, para el pie de página debe estar vacío, sin mostrar los objetos de la página. Y aquí nos encontramos con una limitación más: no podemos hacer un bolsillo vacío a expensas de relleno en #diseño, porque entonces se convertirá en más del 100%. No salvará y margen - el vacío debe hacerse debido a las propiedades de los elementos anidados. Además de todo, es necesario asegurarse de que los elementos flotantes no salgan por debajo del borde del bloque, lo que se hace, por ejemplo, por un bloque
Veamos la estructura de las páginas de nuestro experimental. La forma más sencilla de hacerlo es abrir la ventana de Firebug o una ventana similar (Herramientas de desarrollo (Ctrl-F12)) en Chrome.
Pasemos a un ejemplo práctico
Lo que vemos defectos de diseño en términos de implementar el efecto de un pie de página clavado? Vemos eso1) el pie de página del sitio está dentro de un bloque con id \u003d layout, que no tiene porcentaje de altura. En teoría, él, los padres y el bloque de contenido a la izquierda deben configurarse al 100% de altura. Hay problemas con este último, no es adecuado para esto. En consecuencia, falta un bloque de capa intermedia o el pie de página está en el nivel incorrecto. Además,
2) la altura del pie de página es variable (depende del número de elementos de la lista y del tamaño de fuente, esto no se puede ver en HTML, sino en CSS). Y
3) encima #diseño hay un bloque de anuncios con una altura fija de 90 px;
4) no hay cuadros de alineación en el pie de página o (en general) en el cuadro #diseño (si, pero por encima del bloque .posts_rotated; sin embargo, quizás debería referirse al pie de página).
Punto 4: tendrás que dibujar con un guión.
Parecería sencillo averiguar el tercer punto agregando #layout (margin-top: -90px;) Pero recuerde que es posible que este bloque no exista: lo suprime un cortador de pancartas o los anunciantes repentinamente decidirán no mostrarlo. Hay varias páginas en el sitio donde no lo es. Por lo tanto dependencia margen superior de un bloque de anuncios es una mala idea. Mucho mejor es colocarlo dentro #diseño - entonces no interferirá con nada.
El primer punto es que para que el pie de página con clavos funcione, debe colocar el bloque de pie de página debajo #diseño... Sin embargo, con la ayuda de javascript, puede implementar otros esquemas del pie de página clavado, pero en cualquier caso, necesita JS o el diseño inicialmente correcto para prescindir de él.
Dado que no podemos ser más fuertes que el último diseñador de diseño de sitios web que "pegó" el pie de página dentro del contenido, pospondremos la idea de la ubicación correcta del pie de página en nuestro sitio futuro (que, por lo tanto, será "más genial" Habr!), Y diseccionaremos Habr con javascript (script de usuario) a la correcta estados. (Debemos decir de inmediato que no es el diseñador de maquetación o el conmutador el culpable, sino que el tipo de sitio, por supuesto, determina la decisión estratégica de la gestión del proyecto). De esta forma no llegaremos al ideal, porque en el primer o segundo segundo durante el proceso de carga la página estará con la maquetación incorrecta. Pero el concepto y la capacidad de superar al sitio más popular en el mundo de las TI son importantes para nosotros.
Por lo tanto, en el lugar correcto del script (al principio, al final de la carga de la página), escribiremos las transferencias del anuncio DOM y los bloques de pie de página en los lugares requeridos. (Preparémonos para el hecho de que debido a los scripts de los usuarios, la solución será más complicada que una limpia).
var dQ \u003d function (q) (return document.querySelector (q);) // para la abreviatura var topL \u003d dQ ("# topline"), lay \u003d dQ ("# layout"), foot \u003d dQ ("# footer" ); if (topL && lay) // banner - dentro del bloque de contenido lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // envolviendo pie de página lay.parentNode.insertBefore (pie de página, lay.nextSibling);
Colocamos los bloques en sus lugares; ahora queda asignar las propiedades necesarias a los elementos. La altura del pie de página deberá establecerse exactamente, simplemente porque ya la conocemos cuando actúa el script de usuario (final de la carga de la página). Debido al punto de activación del script de usuario, como se mencionó anteriormente, es inevitable un salto en la visualización del pie de página en la página. ¿Puedes intentar poner una "buena cara" pero con un "mal juego"? ¿Para qué? El “mal juego” del sitio te permite hacer un concepto sin super-esfuerzos, que será suficiente para evaluar la calidad y no será necesario si “juegas correctamente” en tu proyecto.
if (pie) (// alineador de bloque
Aquí nos permitimos usar una función autoescrita h.apnd_elque hace aproximadamente lo mismo que en jQuery -
$("") .css ((altura: pieH || 0)). appendTo ($ (pie de página))
Y luego hay otra función típica de inyección de reglas CSS: h.addRules... Aquí no puede prescindir de él, porque debe declarar una regla con " ! importante"- solo por las peculiaridades de las prioridades de estilo del script de usuario.
Con estos fragmentos de código, podremos ver el pie de página clavado en el script del usuario (después de saltarlo hacia abajo) y entender completamente cómo construir el diseño de la página. Es frustrante usar el diseño de rebote a diario, por lo que se recomienda hacerlo únicamente para demostración y prueba. En el script de usuario de HabrAjax, instalé un script similar, cerrándolo con la configuración "underFooter" (marque la casilla en la lista de configuraciones antes del "pie de página clavado"), comenzando desde la versión 0.883_2012-09-12.
¿El pie de página clavado afecta la necesidad de actualizar los estilos de ZenComment si están instalados? Sí lo hace. Debido a la compleja cadena de prioridades de estilo, en la que los estilos insertados por el script de usuario tienen la prioridad más baja, tuve que ajustar ligeramente los estilos de usuario para oportunidades trabajar con un pie de página clavado. Si no actualiza el estilo de usuario (hasta 2.66_2012-09-12 +), el pie de página no funcionará correctamente.
Bloquear rotated_post (tres publicaciones populares del pasado) parece más lógico en el pie de página, por lo que en un script real también se mueve al pie de página.
El segundo punto (de la lista de imperfecciones en el diseño) es el razonamiento puramente para Habr (no se aplican al script de usuario y repiten parcialmente los anteriores).
Las páginas tienen un problema que les impide crear un pie de página clavado en CSS puro, una altura de pie de página indefinida basada en los tamaños de fuente predeterminados del navegador. Para implementar un pie de página en CSS, debe elegir las alturas relativas de las fuentes, pero es posible que no funcionen si las fuentes proporcionadas no están disponibles en la computadora del usuario. Por lo tanto, la solución debe incluir un javascript que pueda ajustarse a la posición aproximada del pie de página con transiciones al exacto. O, después de haber analizado la aceptabilidad de la solución realizada en el script de usuario en diferentes plataformas, realice una instalación calculada del pie de página clavado; las primeras observaciones muestran que la solución es práctica.
Conclusión: es posible organizar completamente el diseño en Habré, pero para esto necesita un diseñador de diseño que comprenda claramente el comportamiento del diseño, organizando los bloques en el orden correcto. (Ahora el pie de página y el banner superior están "en el lugar equivocado" y no sólo estilos para obtener un pie de página clavado). Puede prescindir de JS si establece la altura del pie de página en unidades relativas, ocupando algo de espacio para la incertidumbre de la fuente.
Implementación
Si habilita HabrAjax 0.883+, veremos que funciona el "pie de página clavado". Se adapta en altura mediante guiones. Le permite evaluar cuánto mejor se ven las páginas con el pie de página clavado en comparación con las normales. Los estilos de usuario de ZenComment son compatibles con los scripts, pero para que el pie de página funcione correctamente, debe instalar ZenComment 2.66_2012-09-12 + versión con ellos.Hechos del comportamiento de implementación
El chamanismo con pie de página, estilos y guiones es chamanismo (solo respaldado por la teoría). El comportamiento es ligeramente diferente en diferentes navegadores, pero en algunos lugares es inesperado. Sin scripts de usuario y reordenamientos de bloques, los resultados serán diferentes. Esto es lo que dieron los experimentos con la implementación en el script de usuario.1) Firefox: falta inesperada de saltos de pie de página. Es extraño que no estén allí: el renderizado se produce después de colocar el pie de página en la parte inferior.
2) Chrome - me sorprendió con un "desplazamiento errante" - los espacios vacíos en la parte inferior se agregan a la página con un período de una vez por segundo - algo malo sucede con el cálculo de alturas. Se trata escribiendo html, body (altura: 100%) al estilo de usuario, pero sin garantías de que siempre funcionará. Es más seguro verificar si el documento no excede la altura de la ventana, y si no, mover el pie de página, de lo contrario nada. Con el salto, todo está en orden, así es.
3) Opera: sin saltos (v. 12.02) en la carga de la primera página, pero una recarga apresurada puede mostrar un salto en el pie de página. De lo contrario, conduce no menos correctamente que Fx.
Bueno, tendrá que enseñar especialmente a Chrome a comportarse correctamente (con un script) y de esta forma lanzar la versión para su revisión. Por lo tanto, el sitio en el script de usuario es un poco más complicado que el que se da en el artículo.
Cabe recordar que esta no es una implementación completa, no tiene en cuenta, por ejemplo, los casos de cambio de tamaño de ventana por parte del usuario. También puede encontrar combinaciones raras (en la práctica) de cambiar la altura del pie de página antes y después de moverse, donde la lógica comenzará a funcionar mal sin causar inconvenientes. Las desventajas se dejaron deliberadamente, porque se observa el equilibrio entre la complejidad de la revisión y la oportunidad de la solución.
Como resultado, resultó ser un esquema de trabajo bastante viable, al menos para computadoras estacionarias rápidas. Si se encuentra un comportamiento de pie de página incorrecto, la configuración "underFooter" debe estar deshabilitada.
¿Para qué páginas es útil?
En un sitio estándar, sin estilos de usuario, incluso las páginas breves de preguntas y respuestas resultan tener más de 1500 px, lo que en la mayoría de los casos es invisible con monitores horizontales. Pero incluso con monitores convencionales, las páginas personales de los usuarios con una altura de aproximadamente 1300 píxeles a menudo se encuentran, donde un pie de página ininterrumpido aparece en todo su esplendor. Algunas páginas de la configuración del usuario tampoco son muy largas.Si usa estilos de usuario de ZenComment, estos reducen en gran medida la altura de página requerida, y es posible que el script de usuario de HabrAjax no muestre algunas o todas las barras laterales en la barra lateral. Por lo tanto, con scripts y estilos, el efecto de un pie de página sin establecer se observa con mucha más frecuencia. Por lo tanto, es lógico que apareciera una corrección de pie de página por primera vez en HabrAjax. Pero incluso un sitio normal tiene varias páginas en las que sería útil un pie de página clavado.
¿Habrá apoyo?
El comportamiento del sitio durante el año pasado muestra que los desarrolladores (y por lo tanto la administración) han comenzado a implementar características que anteriormente solo existían en los scripts y estilos de usuario. Por ejemplo, a principios de año escribí donde recogí muchos pequeños deseos. Seis meses después, volví a él y noté con satisfacción (justo en el texto; puede ver la "UPD" y las fechas) que una serie de características descritas como deseos ya se habían implementado en el sitio.
A continuación, veamos las "flechas" en lugar de los cuadros para evaluar los comentarios. Aparecieron en la usersily almalexa ("Prettifier") hace 3 años y fueron adquiridos en ZenComment hace 2 años. Hace unos 2-3 meses, aparecieron en el sitio. Empieza a creer que después de un tiempo las flechas se extenderán una cierta distancia, como se hace en ZenComment (una flecha a la izquierda del número, la segunda a la derecha), para fallar menos.
Por lo tanto, quizás, el "pie de página clavado" en Habré no es una fantasía como podría parecer hace unos 3 años.
Se introdujeron otras características en el script HabrAjaxdurante los últimos 3 meses (se puede desactivar en la configuración):
* Autores de campos de entrada (en Opera puede ralentizarse en textos grandes);
* días de la semana con fechas distintas de "hoy" y "ayer";
* Eventos en el feed, que se pueden contraer a 1 línea y 2 caracteres;
* reducción de las palabras "habr *" a "χ ·" y "χα";
* pistas de fechas por número de artículo: se informa en qué mes y año estaba el artículo antes de que se cargara, por el número en la URL;
* Contrajo "Publicaciones relacionadas" a 2 palabras. Captura de pantalla de las ventanas emergentes de "publicaciones similares" (que muestra 12 enlaces, no 4).
HTML5 introduce varias etiquetas nuevas para la estructura del código: