0

Bom dia galera, Estou tendo problemas com a div do meu rodapé. Sempre que vou usando o atalho CTRL + (+), chega um momento que o rodapé fica preenchendo a parte final da página. Tem como eu resolver isso? Segue abaixo o código código da página html:

<div id="footer">
    <div id="corpo">

        <div id="coluna1">
            Congregação São João - RJ<br>
            CNPJ: 27-001/11.280.416<br>
            CEP: 250-25-515<br>
            Rua: Santo Antônio, nº523<br>
            Centro - São João de Mereti/RJ

        </div>  

        <div id="coluna2">
            Congregação Pau Grande - Magé/RJ<br>
            CEP: 25.933-145<br>
            Rua: Lindsay Anderson, nº 15<br>
            Pau Grande - Magé/RJ

        </div>

        <div id="coluna2">
            Congregação Santa Inês - Vila Velha/ES<br>
            CEP: 29.108-041<br>
            Rua: Avenida Rui Braga Ribeiro, nº961<br>
            Santa Inês - Vila Velha/ES
        </div>

    </div>
</div>

E o css:

#footer {
    position: relative;
    margin-top: -150px; /* valor negativo da altura do rodapé */
    width: 100%;
    height: 150px;
    clear: both;
    background-repeat: no-repeat; 
    background-position: center right;
    background-color: #7d0d0d;  
}

#textorodape{
    margin-right: 100px; 
    color: white; 
    font-size: 16px;
    position: center right; 
}

#coluna1 {
    float: left;
    width: 333px;
    color: white;
    font-size: 14px;
}

#coluna2 {
    float: left; 
    width: 333px;
    color: white;
    font-size: 14px;
}
3
  • Julio, acho que você poderia enviar o html também, pois não entendi onde está sendo utilizado coluna1 e coluna2, imagino #footer seja o id de uma div, mas o textorodape também é id ou é class? é usada em uma div? 29/02/2016 às 15:05
  • Obrigado @EduardoMendes, essa textoropade é um id, mas não estou utilizando. Vou enviar o html, só um minuto! 29/02/2016 às 15:24
  • @EduardoMendes, pronto, editado! 29/02/2016 às 15:25

2 Respostas 2

2

Minha sugestão é utilizar o tamanho do em porcentagem. Imagino que tenha outra acima da . No exemplo abaixo eu adicionei uma chamada e coloquei seu tamanho em porcentagem. Observe também que coloquei as tags e com o width e height em 100%. Então a com 85% e a com 15%. Desta forma, o zoom não irá influenciar no tamanho das , somente no tamanho da .

Veja o :

html, body {
    width:100%;
    height:100%;
    padding: 0;
    margin: 0;  
}

#conteudo {
    width:100%;
    height:85%;
    background:#FFED00; 
}

#footer {
    position: relative;
    /*margin-top: -150px;*/ /* valor negativo da altura do rodapé */
    width: 100%;
    height: 15%;
    clear: both;
    background-repeat: no-repeat; 
    background-position: center right;
    background-color: #7d0d0d;  
}

#textorodape{
    margin-right: 100px; 
    color: white; 
    font-size: 16px;
    position: center right; 
}

.coluna1 {
    float: left;
    width: 333px;
    color: white;
    font-size: 14px;
}

.coluna2 {
    float: left; 
    width: 333px;
    color: white;
    font-size: 14px;
}

E aqui o

<div id="conteudo"></div>

<div id="footer">
    <div id="corpo">

        <div class="coluna1">
            Congregação São João - RJ<br>
            CNPJ: 27-001/11.280.416<br>
            CEP: 250-25-515<br>
            Rua: Santo Antônio, nº523<br>
            Centro - São João de Mereti/RJ

        </div>  

        <div class="coluna2">
            Congregação Pau Grande - Magé/RJ<br>
            CEP: 25.933-145<br>
            Rua: Lindsay Anderson, nº 15<br>
            Pau Grande - Magé/RJ

        </div>

        <div class="coluna2">
            Congregação Santa Inês - Vila Velha/ES<br>
            CEP: 29.108-041<br>
            Rua: Avenida Rui Braga Ribeiro, nº961<br>
            Santa Inês - Vila Velha/ES
        </div>

    </div>
</div>

Obs: Não é recomendável que tenha mais de um no código , quando isso acontece o ideal é substituir por , no caso das .

2
  • Muito obrigado, funcionou corretamente!! 29/02/2016 às 16:55
  • Beleza. Se você achar necessário, depois marque a resposta como útil e aceita lá como a melhor resposta. Abraços 29/02/2016 às 17:02
-2

Você já experimentou deixar o css da seguinte maneira ?

.footer { position:absolute;

Com isso, o seu rodapé não irá mais ser alterado pelo zoom do navegador.

0

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 .