5

Recentemente me deparei com um problema em um rodapé de um projeto meu. O rodapé no caso, deve ficar no fim da página (bottom: 0;), até ai tudo bem, fica normal.

O problema é que quando entro no site através do navegador do meu celular, ao tentar preencher os inputs do formulário de cadastro da página, o teclado do celular aparece normal mas o rodapé, ao invés de ficar no fim da página acaba ficando acima do inicio do teclado.

Sei que o problema está no fato de eu estar usando o bottom: 0;, porém não encontrei nenhuma forma de resolver isso, e gostaria que alguém pudesse me ajudar a encontrar uma solução ou dica pra resolver isso. Agradeço!

Segue código do rodapé:

footer {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
}
1
  • A melhor maneira (ao meu ver) de resolver isso, é via media query, desabilitar o footer com absolute e deixar o comportamento normal.
    – Bruno Wego
    Commented 15/09/2015 às 19:08

5 Respostas 5

2

Aplique ao footer posição absoluta somente em resoluções maiores utilizando media query:

@media screen and (min-width: 768px) {
  footer {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
  }
}

Outra forma seria utilizar JavaScript e calcular o height da tela, se o elemento body ultrapassar o tamanho da tela você remove o absolute do footer.

0

Acredito que essa estrutura pode resolver o seu problema.

Nessa estrutura basicamente a div wrapper faz com que o footer seja puxado sempre para o final da página, independente do conteúdo da página.

DEMO e Fonte

0

usa jquery, resolve perfeitamente

$(document).ready(function () { 
var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
    if(window.innerHeight < initialScreenSize){
        $("#suaid").hide();
    }
    else{
        $("#suaid").show();
    }
});
    }); 
0

Na resolução mobile, utilizando @media você pode utilizar o position Fixed. isso te ajuda ?

footer {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
} 

ou simplesmente retirar o position quando for celular.

0

I create an example using flexbox. Its already compatible with most of the browsers as you can see in the can this link:

can I use - flexbox css

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

section, header, footer {
  margin: 0;
  padding: 0.5em 1em;
  box-sizing: border-box;
  width: 100%;
}

section {
  overflow: auto;
  flex-grow: 1;
}

header, footer {
  flex-grow: 1;
  background: #f0f0f0;
}

h1, p {
  margin: 0;
}
<div class="main-container">
  <header>
    <h1>menu</h1>
  </header>
  <section class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt accusamus aperiam debitis maiores, corporis quae quis? Adipisci explicabo, suscipit. Doloremque at sequi recusandae blanditiis nihil velit harum, voluptatibus, pariatur fugiat.</p>
    <p>Facere quibusdam officiis suscipit ipsam non quisquam ipsum quae, animi doloribus soluta maiores ullam numquam odit perferendis molestiae mollitia itaque repellendus, vel saepe necessitatibus? Quam nihil cupiditate temporibus dolores exercitationem.</p>
    <p>Ex sed odit, consequuntur quis maxime adipisci, non dolores natus culpa aliquid incidunt. Quo perspiciatis adipisci, veritatis ipsa odio odit alias et a. Nostrum est, quae, nobis quaerat reprehenderit voluptate.</p>
    <p>Rem corporis cupiditate libero rerum similique deleniti error, dolores, harum earum quos! Perspiciatis consectetur enim cupiditate perferendis at itaque, maxime cum, quisquam nam sed iusto sint alias, natus repellendus. Quod.</p>
    <p>Deleniti maiores ipsa, nam enim assumenda ad voluptates. Ratione error pariatur sit doloremque, omnis placeat incidunt quasi, hic soluta quos ea vitae rerum dolores fugiat in natus, reiciendis, beatae consequuntur?</p>
    <p>A possimus obcaecati velit iure. Aliquam rerum tenetur nobis eveniet reiciendis delectus impedit debitis soluta cum, animi atque sapiente ex quidem sunt nam laboriosam provident nemo, excepturi quis dignissimos fuga.</p>
    <p>Id cupiditate, accusantium repellendus repellat aut eum illo recusandae delectus neque impedit autem animi, sit, inventore possimus unde rerum maiores cum molestias. Odit suscipit asperiores aut cum molestias libero deserunt!</p>
    <p>Ipsa ipsam pariatur provident, harum ratione quibusdam veniam tempora accusamus esse eligendi maxime adipisci, officiis optio veritatis hic nemo voluptates. Voluptate aspernatur in illum quisquam reprehenderit reiciendis maiores cumque nesciunt.</p>
    <p>Corporis quidem dolores ipsum deserunt incidunt voluptatibus animi a perferendis adipisci, culpa possimus ratione natus earum molestiae consectetur odio nostrum accusantium repellat quas quod. Corrupti exercitationem consequuntur facere dignissimos vel.</p>
    <p>Reprehenderit voluptatum veritatis eos non, quaerat dolorem excepturi adipisci, nobis, possimus amet obcaecati mollitia repellendus architecto saepe! Qui voluptas, in! Sunt, temporibus, quidem. Vel ratione, quis consequatur maiores sapiente in?</p>
    <p>Voluptas dolores dolor ex cumque consequuntur commodi, dicta asperiores omnis facilis cupiditate saepe minus minima tempora iste magni enim eveniet at, recusandae similique expedita, ratione praesentium assumenda? Voluptatem, reiciendis, nisi.</p>
    <p>Beatae eligendi repellat, molestiae dolores esse consequuntur dignissimos sapiente, qui, amet placeat aut provident porro, vero laboriosam. Sunt animi rerum labore repellat consequuntur, delectus porro eveniet. Commodi quasi, assumenda omnis!</p>
    <p>Delectus, ab sit debitis mollitia, modi omnis repudiandae, ex ducimus nemo neque possimus. Officia dolore quasi sequi nobis accusamus, beatae quidem ut officiis consequuntur similique excepturi voluptate voluptatem dolorem pariatur.</p>
    <p>Possimus repellat et itaque velit accusantium, nihil sequi sed eveniet iusto ipsum quo, enim odio quia. Magnam tempora, illo, odit rem esse accusantium necessitatibus earum veritatis in perferendis quas cumque.</p>
    <p>Rem soluta totam vitae, earum dicta, nam tempora nihil facilis numquam eveniet. Quia odit cupiditate error. Autem tempore libero consequatur, iusto consequuntur, officiis, commodi, incidunt aliquid repellendus quas reprehenderit doloremque.</p>
    <p>Explicabo nisi omnis cupiditate, voluptatibus eius ratione labore totam repudiandae! Provident iusto alias, quae quod odit perferendis! Quod officiis nesciunt minus omnis commodi vitae, assumenda quos ut velit earum error.</p>
    <p>Voluptate cum adipisci architecto odit est sint aliquam suscipit consequatur inventore rerum nesciunt autem eius reprehenderit magni aut, delectus quas quod nostrum officiis laboriosam assumenda quaerat voluptas. Atque et, libero?</p>
    <p>Magnam, voluptatibus sequi eius impedit, ut quo veniam animi harum aperiam fuga, quod ipsam recusandae nam possimus. Enim perferendis perspiciatis officiis doloribus, labore quasi odit, voluptates reprehenderit rerum, atque amet.</p>
    <p>Explicabo veritatis fuga veniam sequi quia similique quod ducimus, quisquam impedit dolorem ullam. Officia aspernatur nulla dolor laudantium provident illo, obcaecati voluptates fugit sapiente ab recusandae ducimus, repellat quibusdam praesentium.</p>
    <p>Suscipit dicta consequatur harum, commodi debitis ad est amet? Nobis praesentium recusandae temporibus fugiat consequuntur nemo neque assumenda hic laborum ullam, quidem tempore cumque quae ex debitis, reprehenderit aliquam quia.</p>
  </section>
  <footer>
    <p>&copy; all rights reserved.</p>
  </footer>  
</div>

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