Rodapé variando de posição dependendo da página | HTML e CSS

Olá, pessoal! Boa tarde

Estou trabalhando em um projeto de Website que está quase pronto, mas o rodapé da página fica variando a posição dependendo da aba. Nas páginas "Home" e "Membros", o rodapé fica posicionado corretamente no fim da página. Mas nas páginas "Sobre nós" e "Agenda" o rodapé fica flutuando acima do fim da página, como podem observar nos prints abaixo. Já tentei corrigir isso com a propriedade position: fixed, mas não funcionou. Alguém pode me dar uma ajudinha com esse problema? Insira aqui a descrição dessa imagem para ajudar na acessibilidade Rodapé flutuando acima do fim da páginaRodapé posicionado corretamente

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsara | Agenda</title>
    <link rel="stylesheet" href="./Style/Style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre nós</a>
            <a class="cabecalho__menu__link" href="members.html">Membros</a>
            <a class="cabecalho__menu__link" href="schedule.html">Agenda</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Confira nossa agenda de eventos</h1>
            <div>
            <h2 class="apresentacao__conteudo__subtitulo">Expo Itaguaí 2023</h2>
            </div>
            <p class="apresentacao__conteudo__texto"><strong class="titulo-destaque">Local: </strong>Parque Municipal, Itaguaí - RJ</p>
            <p class="apresentacao__conteudo__texto"><strong class="titulo-destaque">Horário: </strong>8 de julho de 2023, 18:30</p>
            <p class="apresentacao__conteudo__texto"><strong class="titulo-destaque">Entrada Franca</strong></p>
        <a href="https://www.google.com/maps/place/Expo+Itaguai/@-22.8764729,-43.7872328,15z/data=!4m6!3m5!1s0x9bf9594ee9a71d:0x1ae84de2e8956a81!8m2!3d-22.876493!4d-43.776933!16s%2Fg%2F11kqr3zrqn?entry=ttu" target="_blank">
           <p class="apresentacao__links__navegacao"><strong>Ver no Mapa</strong></p>
        </a>
        </section>  
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Venancio Serrano.</p>
    </footer>          
</body>
</html>

HTML da página "Agenda"

.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 23.64px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.50rem;
    font-weight: 400;
}

CSS do rodapé

Olá Venancio!

Nesse caso isso acontece por conta da quantidade de conteúdo, quanto mais conteúdo tiver mais para baixo vai o footer, portanto, tem diversas formas para você arrumar, pode ser acionando, conteúdo empurrando conteúdo com um margin, por exemplo, ou fixando a barra no final da tela para isso, no seu código você pode usar a propriedade position: fixed combinada com bottom: 0. Isso fixará o footer na parte inferior da tela.

.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 23.64px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.50rem;
    font-weight: 400;
    position: fixed;
    bottom: 0;
    width: 100%; /* para ocupar o tamanho completo da tela*/
}

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!