Haga que el pie de página HTML permanezca en la parte inferior de la página con una altura mínima, pero no se superponga la página en CSS

Daniela Villaseñor
Haga que el pie de página HTML permanezca en la parte inferior de la página con una altura mínima, pero no se superponga la página en CSS
HTML permite a los desarrolladores web agregar varios componentes para crear una página web. Normalmente, las páginas web se clasifican en tres partes: encabezado, cuerpo y pie de página. El ""El elemento generalmente contiene contenido introductorio", ""Es la última sección de la página web que contiene detalles del sitio web o los detalles del usuario, y""Contiene el contenido principal de la página web.

Este artículo examinará:

  • Cómo hacer un pie de página?
  • Cómo hacer que el pie de página HTML permanezca en la parte inferior de la página?

Cómo hacer un pie de página?

Para crear un pie de página, los usuarios pueden usar un simple "Elemento "o un"" etiqueta.

Para una mejor concepción, pase por el procedimiento proporcionado.

Paso 1: Insertar encabezado

Primero, inserte un encabezado utilizando cualquier etiqueta de encabezado de "

" a "

". Por ejemplo, hemos usado el "

"Etiqueta para agregar un encabezado de nivel uno.

Paso 2: Crear contenedor "Div"

A continuación, cree un contenedor "div" con la ayuda del "" etiqueta. Además, agregue un atributo de "clase" y asigne el nombre "contenido principal".

Paso 3: crea otro contenedor "div"

Ahora, haz el próximo "div"Contenedor, y especifique"cuerpo"Como el"identificación" valor de atributo.

Paso 4: Crear tabla

Utilizar el "

"Etiqueta para hacer una mesa en el segundo contenedor. Luego, agregue los siguientes elementos entre el "
" etiqueta:

  • "
"Elemento utilizado para definir las filas en la tabla.
  • "
    • "Se usa para agregar el encabezado de la tabla.
  • "
    		• "Define una celda de datos dentro de la tabla para insertar datos.

    Paso 5: Crear pie de página

    A continuación, cree un pie de página insertando otro "div"Contenedor y asignarlo una clase"pie de página":

    Pie de página de página permanece en el fondo










    Temas de informática
    Sistema operativo
    DBMS
    Red de computadoras
    Gestión de proyectos


    pie de página

    Alternativamente, el usuario puede utilizar HTML ""Elemento para agregar pies de página en la página HTML:

    pie de página

    Producción

    Cómo hacer que el pie de página HTML permanezca en la parte inferior de la página?

    Para hacer que el pie de página de la página HTML permanezca en la parte inferior de la página, pruebe las instrucciones a continuación.

    Paso 1: Estilo primer contenedor "div"

    Acceda a lo principal "div"Contenedor utilizando la clase".contenido principal"Y aplique las propiedades de la lista de CSS:

    .contenido principal
    Posición: relativo;
    Min-altura: 80%;
    Color de fondo: Bisque;
    Text-Align: Center;

    Aquí:

    • "posición"Propiedad de que el elemento se coloca en relación con su posición normal.
    • "mínimo"Se usa para definir la altura mínima del elemento.
    • "color de fondo"Especifica un color particular en la parte trasera del elemento.
    • "texto alineadoSe utiliza la propiedad para establecer la alineación del texto.

    Producción

    Paso 2: Segundo contenedor "div" de estilo

    Ahora, acceda al segundo elemento "div" usando el "identificación" atributo "#cuerpo". Luego, aplique las siguientes propiedades CSS:

    #cuerpo
    relleno: 30px;
    Botón de relleno: 60px;
    margen: 10px 80px;

    La descripción del código anterior se da a continuación:

    • "relleno"Se utiliza para asignar el espacio alrededor del contenido del elemento.
    • "fondo acolchado"Se usa para agregar espacio inferior dentro del elemento.
    • "margen"Especifica el espacio fuera del elemento.

    Producción

    Paso 3: pie de página de estilo

    Si ha utilizado el ""Etiqueta, luego se puede acceder con el nombre de la etiqueta. En este escenario, hemos accedido al "div"Contenedor con la clase".pie de página":

    .pie de página
    Posición: Absoluto;
    Abajo: 0;
    Top-top: 10px;
    Text-Align: Center;
    Ancho: 100%;
    Altura: 80px;
    Antecedentes: RGB (134, 240, 139);

    Después de acceder al contenedor "Div", aplique las siguientes propiedades de CSS:

    • Aquí, "posiciónLa propiedad se utiliza para establecer la posición de un elemento. El pie de página se establecerá en la parte inferior de la página configurando el valor como "absoluto".
    • El "abajo"Se usa para establecer la posición vertical de un elemento posicionado. Esta propiedad no afecta a elementos no posicionados.
    • "acolchado superior"Se usa para agregar espacio dentro del elemento en el lado superior solamente.
    • "ancho"Define el ancho de un elemento.
    • "altura"Define la altura de un elemento.
    • "fondo"Se usa para establecer el color de fondo del elemento.

    Se puede notar que el pie de página de la página está configurado en la parte inferior de la página:

    Has aprendido sobre hacer que el pie de página de la página permanezca en la parte inferior de la página con la altura mínima.

    Conclusión

    Para que el pie de página HTML permanezca en la parte inferior de la página con la altura mínima, primero, cree el pie de página usando el ""Etiqueta o""Elemento en html. Luego, acceda al pie de página en CSS por nombre de etiqueta o clase o ID asignada. Luego, aplique el "Posición: Absoluto"Propiedad para hacer que el pie de página se quede en la parte inferior de la página. Esta publicación ha explicado el método para hacer que el pie de página HTML permanezca en la parte inferior de la página.

    AWS
    ¿Cuáles son las funciones del paso de AWS y cómo usarlas??
    Las funciones del paso de AWS se crean para realizar tareas secuenciadas y proporcionar la interfaz ...
    Salvador Anaya
    Git
    Cómo crear un repositorio de git para proyectos locales?
    Para crear un repositorio de git para proyectos locales, muévase al directorio de git y enumere todo...
    Carolina Guzmán
    golang
    Cómo recortar una cadena en Golang
    El recorte de cadenas es un proceso de eliminación de espacios o caracteres adicionales desde el pri...
    Jacobo Piña