1

inserir a descrição da imagem aquiinserir a descrição da imagem aquiEstou fazendo um sistema web responsivo usando alguns elementos bootstrap. O sistema todo está responsivo exceto pelo rodapé que, além de sair da posição fixa na parte inferior da tela ainda diminui o tamanho.

Segue o código html e css do rodapé:

<footer class="footer">
            <div class="container">
                <span class="text-muted" style="
                    position: absolute;
                    bottom: 0;
                    width: 120%;
                    height: 60px;
                    line-height: 60px;
                    background-color: #222222;
                    margin-left: -214px;
                    text-align: center;">
                    <font>
                        <font> Desenvolvido por ****** - *****</font>
                    </font>
                </span>
            </div>
        </footer> 

Obs: HTML E CSS estão juntos pra evitar dor de cabeça.

4
  • Por que o estilo está no span e não no footer?
    – user83428
    Commented 13/07/2017 às 13:25
  • Foi gerado por aquele editor do google que aparece quando você pressiona ctrl+shift+i, eu só mantive. Commented 13/07/2017 às 13:28
  • Está assim no projeto ou apenas na pergunta? Se estiver assim no projeto tente mover esse estilo para o footer.
    – user83428
    Commented 13/07/2017 às 13:31
  • Comentei uma foto com o projeto. Commented 13/07/2017 às 13:40

3 Respostas 3

1

Bom dia Mariana, então pelo que eu entendi do seu código você quer um rodapé responsivo e fixo no final da página correto? tente colocar as propriedades de estilo: width: 100%, height: 60px, position: fixed; todas na tag footer.

4
  • Então, aparentemente tem alguma grid em baixo impedindo o rodapé de ficar em baixo. Commented 13/07/2017 às 14:23
  • Ele até tá fixo, mas no meio da tela. Commented 13/07/2017 às 14:25
  • tem a possibilidade de você colocar no codepen ou algum similar? Commented 13/07/2017 às 14:29
  • Vou colocar uma foto do resultado. Commented 13/07/2017 às 14:34
1

Tirei o position absolute, o margin, dei um width:100% e adicionei um float left, assim ele fica responsivo em qualquer dispositivo:

       <footer class="footer">
            <div class="container">
                <span class="text-muted" style="
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    background-color: #222222;
                    text-align: center;
                    float: left;
                    ">
                    <font>
                        <font> Desenvolvido por ****** - *****</font>
                    </font>
                </span>
            </div>
        </footer>
1
  • Ficou em cima de uma possível grid invisível. Vou colocar o código completo, talvez ajude. Commented 13/07/2017 às 16:42
0

CONSEGUI RESOLVER O PROBLEMA.

<footer class="footer" style="
        position: fixed;
        width: 100%;
        height:60px;">
        <div class="container-flex rodape">
            <span class="text-muted" style="
                position: fixed;
                bottom: 0;
                width: 120%;
                height: 60px;
                line-height: 60px;
                background-color: #222222;
                margin-left: -214px;
                text-align: center;">
                <font>
                    <font> Desenvolvido por ****** - *******</font>
                </font>
            </span>
        </div>
    </footer>

Só troquei o Absolute por fixed no estilo position dentro do span.

4
  • Mas o footer devia ficar fixo na rolagem de tela ou fixo apenas no final da página? Commented 13/07/2017 às 14:46
  • 1
    Pior, bem lembrado. Então ignora essa resposta que tá errada. O footer deveria ficar fixo no final da página. Commented 13/07/2017 às 14:49
  • Vou fazer uns testes e posto a resposta pra você. Commented 13/07/2017 às 14:51
  • Certo, obrigada. Commented 13/07/2017 às 14:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .