Problema de sobreposição de elemento

Oi, Luiz. Tudo bem?

Estou aqui para ajudar, mas preciso de mais informações para entender sua dúvida.Siga as orientações do guia de como fazer uma boa pergunta no fórum e me retorne com mais informações do problema.

Abraço.

Boa tarde, essa dúvida é sobre o challenger decodificador de texto, desafio de lógica de programação do projeto Oracle One em parceria com a Alura.

A minha dificuldade é a parte de posicionamento de elementos no CSS. O problema é que eu gostaria de deixar o rodapé fixado no fundo da página. Então eu tentei usar position: fixed para manter fixado no fundo, mas ocorre um problema de sobreposição.

Por exemplo, quando aumento a largura da tela, usando o recurso de inspecionar a página, ao chegar a 1600 pixels o elemento da tag footer começa a subir e sobrepõe os outros elementos acima dele. Eu também tentei usar o position: sticky e bottom: 0, mas o comportamento é o mesmo.

Eu já tentei usar position: relative para evitar a sobreposição, mas o elemento do rodapé fica colado no elemento que possui maior altura, que é a textarea que exibi a mensagem criptografada, e não consegui fazer ficar na parte inferior da página.

Eu também já tentei usar min-height: 100vh na classe principal que envolve todo o conteúdo da página, mas acaba jogando o rodapé lá para baixo e acaba criando rolagem e ficou estranho deixar assim.

O sistema operacional que estou usando é Windows e o programa é o VsCode. Todo o projeto é feito em CSS, Html e Javascript.

link do projeto: https://github.com/fearauju/Challenger---desafio-1

Oii

Analisei seu código e fiz alguns testes. Vi que você tinha tentando utilizar a altura de 100vh no elemento que engloba todos os outros da página (que no caso é o próprio body) e acredito que seja a melhor solução. Entretanto, além disso precisamos fazer alguns outros ajustes não só no body, como no rodapé também.

Utilizar as positions fixed, absolute e relative pode ser um pouco frustrante mesmo, portanto vamos eliminar esses elementos do CSS do rodapé. Eliminamos também a propriedade bottom relativa à posição:

.rodape{
    /* position: fixed; */
    /* bottom: 0; */
    width: 100%;
    height: 40px;
    border: 1px solid var(--cor-primaria);
    background-color: var(--cor-BordaTextarea);
    border-radius: 24px;
    font-family: var(--fonte-primaria);
    color: var(--cor-retangulo);
    font-weight: 700; 
    text-align: center;
}

Em seguida, fazemos algumas alterações no body adicionando os seguintes elementos:

body{
    /* height: 100%; */
    height: 100vh; /* altura alterada para o padrão viewport-height */
    margin: 0; /* retirada da margem padrão dos navegadores */
    display: flex; /* definição do display flex para a utilização da altura da página por completo */
    flex-direction: column; /* direção da página em coluna para que o header, main e rodapé fiquem um abaixo do outro */
    justify-content: space-between; /* adicionando espaço automático entre os elementos header, main e rodapé para que o body ocupe a altura inteira da página */
    overflow: hidden; /* escondendo as barras de scroll, pois a barra de scroll inferior ativa a barra lateral */
}

Imagino também que vocês esteja utilizando a funcionalidade de inspecionar para ver a página em diferentes definições. Entretanto, o modo responsividade nem sempre é confiável e as vezes é melhor testar utilizando o próprio zoom do navegador, afinal é como o usuário final utilizará a sua página.

Deixo abaixo a diferença apresentada da mesma resolução, porém uma no navegador e a outra no modo responsividade do DevTools.

Navegador:

DevTools:

Um abraço e bons estudos.