Faça o rodapé HTML ficar no final da página com uma altura mínima, mas não se sobrepõe à página no CSS

Marlon Bernhard
Faça o rodapé HTML ficar no final da página com uma altura mínima, mas não se sobrepõe à página no CSS
HTML permite que os desenvolvedores da Web adicionem vários componentes para criar uma página da web. Normalmente, as páginas da web são categorizadas em três partes: cabeçalho, corpo e rodapé. O "”O elemento geralmente contém conteúdo introdutório,“”É a última seção da página da web que contém detalhes do site ou detalhes do usuário e“”Contém o conteúdo principal da página da web.

Este artigo examinará:

  • Como fazer um rodapé?
  • Como fazer o rodapé HTML ficar na parte inferior da página?

Como fazer um rodapé?

Para criar um rodapé, os usuários podem usar um simples “”Elemento ou um“" marcação.

Para uma melhor concepção, passe pelo procedimento fornecido.

Etapa 1: Insira o cabeçalho

Primeiro, insira um título utilizando qualquer tag de título de “

" para "
”. Por exemplo, usamos o “

”Tag para adicionar um título de nível um.

Etapa 2: Crie um contêiner "div"

Em seguida, crie um contêiner "div" com a ajuda do "" marcação. Além disso, adicione um atributo de "classe" e atribua o nome "conteúdo principal”.

Etapa 3: crie outro contêiner "div"

Agora, faça o próximo “div“Contêiner e especifique“corpo" Enquanto o "eu ia" Valor do atributo.

Etapa 4: Crie a tabela

Utilize o “

”Tag para fazer uma tabela no segundo contêiner. Em seguida, adicione os seguintes elementos entre os “
" marcação:

  • ““
”Elemento utilizado para definir as linhas na tabela.
  • ““
    • ”É usado para adicionar o cabeçalho da tabela.
  • ““
    		• ”Define uma célula de dados dentro da tabela para inserir dados.

    Etapa 5: Crie rodapé

    Em seguida, crie um rodapé inserindo outro “div“Contêiner e atribua uma classe“rodapé”:

    Página rodapé fica no fundo










    Assuntos de ciência da computação
    Sistema operacional
    Dbms
    Redes de computadores
    Gerenciamento de projetos


    rodapé

    Como alternativa, o usuário pode utilizar HTML “”Elemento para adicionar rodapé na página HTML:

    rodapé

    Saída

    Como fazer o rodapé HTML ficar na parte inferior da página?

    Para fazer o rodapé da página HTML ficar no fundo da página, tente as instruções abaixo do ponto abaixo.

    Etapa 1: estilo primeiro contêiner "div"

    Acesse o principal “div”Contêiner utilizando a classe“.conteúdo principal”E aplique as propriedades abaixo da listada do CSS:

    .conteúdo principal
    Posição: relativa;
    Min-altura: 80%;
    Background-Color: Bisque;
    Alinhamento de texto: centro;

    Aqui:

    • ““posição”Propriedade de que o elemento está posicionado em relação à sua posição normal.
    • ““altura da minia”É usado para definir a altura mínima do elemento.
    • ““cor de fundo”Especifica uma cor particular na parte traseira do elemento.
    • ““alinhamento de texto”A propriedade é utilizada para definir o alinhamento do texto.

    Saída

    Etapa 2: estilo segundo contêiner "div"

    Agora, acesse o segundo elemento "div" usando o "eu ia”Atributo“#corpo”. Em seguida, aplique as seguintes propriedades CSS:

    #corpo
    preenchimento: 30px;
    Botting-Bottom: 60px;
    margem: 10px 80px;

    A descrição do código acima é dada abaixo:

    • ““preenchimento”É utilizado para alocar o espaço em torno do conteúdo do elemento.
    • ““Botting-Bottom”É usado para adicionar espaço inferior dentro do elemento.
    • ““margem”Especifica o espaço fora do elemento.

    Saída

    Etapa 3: Footer de estilo

    Se você utilizou o “”Tag, então pode ser acessado usando o nome da tag. Nesse cenário, acessamos o “div“Contêiner com a classe“.rodapé”:

    .ROONO
    Posição: Absoluto;
    Inferior: 0;
    Top-top: 10px;
    Alinhamento de texto: centro;
    largura: 100%;
    Altura: 80px;
    Antecedentes: RGB (134, 240, 139);

    Depois de acessar o contêiner "Div", aplique as seguintes propriedades CSS:

    • Aqui, "posição”A propriedade é usada para definir a posição de um elemento. O rodapé será definido no fundo da página, definindo o valor como “absoluto”.
    • O "fundo”É usado para definir a posição vertical de um elemento posicionado. Esta propriedade não afeta elementos não posicionados.
    • ““Top-top”É usado para adicionar espaço dentro do elemento apenas no lado superior.
    • ““largura”Define a largura de um elemento.
    • ““altura”Define a altura de um elemento.
    • ““fundo”É usado para definir a cor de fundo do elemento.

    Pode -se notar que o rodapé da página está definido na parte inferior da página:

    Você aprendeu sobre como fazer o rodapé da página ficar na parte inferior da página com a altura mínima.

    Conclusão

    Para fazer o rodapé HTML ficar na parte inferior da página com a altura mínima, primeiro, crie o rodapé usando o “”Tag ou“”Elemento em HTML. Em seguida, acesse o rodapé no CSS por nome de tag ou classe atribuída ou ID. Então, aplique o “Posição: Absoluto”Propriedade para fazer o rodapé ficar no fundo da página. Este post explicou o método para fazer o rodapé HTML ficar na parte inferior da página.

    Docker
    Como matar um recipiente do documento?
    Para matar um recipiente do docker, primeiro, escolha um contêiner em particular que precisa ser mor...
    Mr. Warren Cummerata
    Git
    Como gerar um arquivo Git usando o terminal? | Explicado
    Para gerar um arquivo Git usando o terminal, o comando touch pode ser usado. Você pode adicionar o n...
    Mr. Warren Cummerata
    C nítido
    Como o operador lambda '=>' é usado em C#
    O operador '=>' cria funções anônimas em C#, separando os parâmetros de entrada do corpo da função p...
    Tommie Konopelski