Cómo hacer que la parte del pie de página de la página ("pie de página") se adhiera al borde inferior de la ventana: este es probablemente el problema más común en el diseño de las páginas del sitio. Por supuesto, existen soluciones, y hay varias de ellas. A continuación se muestra una forma de asegurarse de que el pie de página siempre esté presionado en la parte inferior de la página, independientemente de la cantidad de contenido y el tipo de navegador.
Es necesario
Conocimientos básicos de CSS y HTML
Instrucciones
Paso 1
Tomemos uno de los esquemas de paginación más típicos como ejemplo: tendrá un ático (encabezado), un bloque principal y un pie de página. Eso sí, si es necesario, puedes poner varias columnas en el bloque principal, pero aquí no lo haremos, solo nos centraremos en no posicionar el pie de página. El código HTML de la página comenzará con la declaración de la especificación:
Entre las etiquetas y, además del título de la página, colocaremos una indicación de la codificación: Así como un enlace a un archivo CSS externo que contiene una descripción de estilos: @import "styles.css"; No colocaremos el descripción de estilos directamente en el código html de la página para evitar complicaciones con el navegador Opera de la novena versión Entre las etiquetas y coloque la estructura de bloques de la página. El primero, por supuesto, es el bloque de título. Le daremos el identificador de encabezado para poder establecer estilos para este bloque en particular:
Este encabezado siempre está en la parte superior de la ventana.
Luego, el bloque principal de la página. Constará de dos anidados: externo (identificador - externo) e interno (identificador - envoltura externa):
Esta es la parte principal.
Y finalmente, el pie de página:
Es el pie de página, ¡siempre en la parte inferior de la ventana!
La página completa se verá así:
Cómo presionar el pie de página
@importar "styles.css";
Este encabezado siempre está en la parte superior de la ventana.
Esta es la parte principal.
Es el pie de página, ¡siempre en la parte inferior de la ventana!
Paso 2
Ahora pasemos al contenido de la hoja de estilo. Implementa el siguiente esquema: el bloque de la página principal se configurará al 100% de altura, el título estará absolutamente posicionado y el pie de página será relativamente. Para evitar que el encabezado se superponga al contenido principal de la página, este contenido principal se coloca en un cuadro adicional dentro del cuadro principal, y este cuadro adicional se establece en un margen superior igual a la altura del cuadro de encabezado. Y al pie de página se le da un margen superior negativo igual a su altura; de esta manera, se elevará por encima del borde inferior de la ventana a su altura completa. Contenido completo del archivo css: * {margin: 0; relleno: 0}
html, cuerpo {altura: 100%;} cuerpo {
de color negro;
posición: relativa;
}
#outer {
altura mínima: 100%;
margen: 0;
fondo: blanco;
de color negro;
} * html #outer {altura: 100%;}
#header {
posición: absoluta;
arriba: 0;
izquierda: 0;
ancho: 100%;
altura: 70px;
fondo: # 304a00;
desbordamiento: oculto;
color blanco;
alineación de texto: centro;
} #footer {
posición: relativa;
margen superior: -50px;
Limpia los dos;
ancho: 100%;
altura: 50px;
color de fondo: # 304a00;
color blanco;
alineación de texto: centro;
}
.outerwrap {
flotador izquierdo;
ancho: 100%;
padding-top: 71px;
} Este archivo debe guardarse con el nombre que especificamos en el código html de la página: styles.css.
