5
respostas

Problema para deixar o rodapé fixo na parte de baixo da página acompanhando a rolagem

Oi, eu tinha conseguido fazer funcionar mas depois da aula 04 de transformações do curso HTML5 e CSS3 II parou de funcionar.

Ele começa na parte de baixo mas está fixo, não acompanha mais a rolagem.

<footer class="rodape clear-fix">
            &copy; Todos os direitos reservados - Bruno Silva
        </footer>
.rodape {
    text-align: center;
    background-color: #000000;
    color: #F2FFFC;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    opacity: 0.80;
    box-sizing: border-box;
}
5 respostas

Tente assim:

.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

Oi Gilberto, obrigado por responder...

Fiz o teste, copiei e colei essa classe no CSS e atribuí ela no HTML

      <footer class="rodape-pagina">
            &copy; Todos os direitos reservados - Bruno Silva
        </footer>
.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

e o rodape ficou no fim da página staticamente e sem pegar as configurações do CSS.

Eu consegui identificar quando o problema ocorreu, na aula 5 foram inseridas essas configurações no CSS que geraram esse problema, quando eu tiro funciona.

html {
    font-size: 150%;   
    position: relative;
    min-height: 100%;
}

body {
    font-family: "Open Sans", "Helvetica", "Verdana", sans-serif;
    line-height: 1.5rem;
    perspective: 6px;
    perspective-origin: 50% 160px;
}

Agora a questão é fazer funcionar em conjunto...

Bom dia pessoal. Não seria o position? Alguma subscrição? Qual a ordem de leitura?

Abraço

Opa Bruno, identifiquei onde está o problema, porém ainda não estou nessa aula, n posso te dizer como resolver, mas o problema esta no valor dessa propriedade aqui perspective: 6px; retirando ou zerando seu valor (0px) o rodapé voltará ao normal.

De uma olhada no JSFiddle que fiz clique aqui

Opa Bruno voltei, vamos lá, o que eu acho que aconteceu foi o seguinte.

você colocou os dados da aula 3D no arquivo errado(site.css)

era pra colocar no arquivo index.css creio que foi esse o motivo.