Quiero compartir con ustedes mi solución de pie de página fijo, sin necesidad de JavaScript (una alternativa a esta solicitud), asumiendo que conocen la altura de su pie de página. Le di el mío 100 píxeles adicionales solo para tener algo de espacio entre el contenido y el pie de página.
En caso de que tenga un pie de página más grande con varias columnas, debería asignar una altura fija diferente en su pestaña móvil.
Paso 1: Pegue esto dentro de su pestaña CSS común
body {
position: relative;
}
#main {
margin-bottom: 350px; /* es igual a la altura del pie de página; cámbielo según lo necesite, tanto en común como en su pestaña móvil */
}
#sticky-footer {
padding: 50px 0;
background: var(--header_background); /* opcional */
color: var(--primary-medium); /* opcional */
text-align: center; /* opcional */
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
Paso 2: Vaya a su pestaña \u003c/body\u003e y pegue su HTML de pie de página dentro
Ejemplo:
\u003cdiv id="sticky-footer"\u003e
\u003cdiv class="wrap"\u003e
\u003c!-- su contenido de pie de página aquí --\u003e
\u003c/div\u003e
\u003c/div\u003e
Eso es todo . Ahora su pie de página se mantendrá pegado en la parte inferior de su página, incluso en páginas con contenido corto.
Así es como se ve nuestro pie de página en una página con contenido corto:
Me lo dices tú, Jeff … ¿necesitamos instalar componentes por cada trozo adicional de código HTML y CSS?
Esto no es un tutorial de “cómo crear un pie de página”, sino más bien una solución alternativa rápida para que el pie de página se quede pegado en la parte inferior de la página, para aquellos que quieran crear su propio pie de página.
Hmm, mi pensamiento es que queremos que la gente utilice los componentes del tema siempre que sea posible, ya que son “oficiales” de nosotros y, por lo tanto, reciben soporte completo, se actualizan automáticamente, etc. ¿Qué opinan @awesomerobot, @Johani y @jordan.vidrine?
Sí, si el componente de pie de página oficial se ajusta a tus necesidades, es genial porque lo mantenemos actualizado para ti, pero algunas personas querrán un diseño diferente.
He hecho algo similar en el pasado… es un proceso parecido al de OP. Estableces la altura de #main-outlet para que sea el 100% de la altura de la ventana gráfica (100vh) menos la altura del pie de página y del encabezado. Así, en páginas cortas, tu pie de página se situará justo en la parte inferior.
#main-outlet {
box-sizing: border-box; // incluye el relleno en el cálculo de la altura
}
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
Contenido de mi pie de página
</script>
<script type="text/discourse-plugin" version="0.8">
api.decoratePluginOutlet(
"below-footer",
(elem, args) => {
let headerHeight = document.querySelector(".d-header").offsetHeight;
let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
let mainOffset = headerHeight + footerHeight;
document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
}
);
</script>
Esto surge con suficiente frecuencia como para que probablemente valga la pena hacer algo así en el núcleo automáticamente si hay contenido en footer.html o en cualquiera de los dos outlets de plugins de pie de página.
. Ahora su pie de página se mantendrá pegado en la parte inferior de su página, incluso en páginas con contenido corto.
… ¿necesitamos instalar componentes por cada trozo adicional de código HTML y CSS?
