Forçar Footer

[saidmrn 26]

Olá pessoal,estou tendo problema para deixar o footer no rodapé da página.

 

Quando é uma página estática,eu uso Position:absolute e ele fica embaixo fixo.Porém tem algumas páginas dinâmicas e isso faz com que o footer fique encima do conteúdo.

O problema é que eu poderia colocar relative nas páginas estáticas,mas elas não ocupam a parte de baixo e sim até a ultima parte do conteúdo.

 

Exemplo:

 

Posição Absolute,funciona normalmente em desktop,mas em celulares fica assim:

 

 

Porém,se eu colocar Relative,ele não fica em baixo.

 

 

Espero que tenham entendido,obrigado desde já !

[L. Henrique 179]

Saidmrn, entendi uns 70% da sua dúvida pra ser sincero... hahahahahaha

Mas vamos lá... Como você está usando o bootstrap (ou independente disso) sempre que você estrutura da seguinte forma:

<div>
   Conteúdo
</div>

<div>
   Conteúdo
</div>

<footer>
   Rodapé
</footer>

A ideia é que o rodapé fique ao fim da página (e os itens nem precisam ter position: relative; o próprio HTML entende a ordem dos elementos).

Provavelmente existe uma estrutura em HTML que esteja errada (fechamento de div, construção de colunas, ordens, etc...) ou menos provavelmente alguma classe e/ou media query está influenciando na exibição do mobile.

Poste o código no JSFiddle e faça um teste.

Abraços!

[saidmrn 26]

Oi L.Henrique,obrigado pela ajuda !

Acesse esta página:

http://bigioinc.com.br/produtos.php

 

Na versão desktop ela está funcionando normalmente,porém da um resize e você verá que o footer está sobre os produtos.

 

Quando diminuir o tamanho,coloque a propriedade Relative,então ela se ajusta.porém voltando ao tamanho desktop,ela já não fica mais embaixo.

[L. Henrique 179]

Opa! Tudo tranquilo?

Então, isso não seria uma questão de media queries?

Ex.:

footer {
   position: absolute;
   bottom: 0;
}

@media screen and (min-width: 768px) {
   footer {
      position: relative;
   }
}

[saidmrn 26]

Sim sim,porém isso não seria uma gambiarra ?

Pensei que poderia haver um jeito para todos os tipos de resoluções.

 

 

Outro problema é que quando não tem produto para ser mostrado,o footer com o RELATIVE fica assim:

Se eu colocar Absolute,ele desce lá pra baixo,porém o usuário vai pra outra categoria que tem produtos,e ele fica no meio da página.

 

[L. Henrique 179]

/* Resposta da Questão 1 */
De forma alguma. Usar media queries é a melhor das soluções (já que evita de você ter que apelar pros inlines no HTML ou até mesmo JS). Você só precisa colocar ele nos media já prontos do bootstrap, sem ter que criar mais alguns com resoluções aleatórias.

/* Resposta da Questão 2 */
Esse caso é bem comum e o HTML/CSS estão exercendo seu papel naturalmente quando não existem produtos. Vamos pensar como se isso fosse LEGO, certo? Se você não tem peças abaixo, você não consegue estruturar a parte de cima e é isso que o HTML faz. Se ele entende que não existem elementos, ele pega o mais próximo pra encaixar (position: relative padrão).

Pra resolver isso, você pode inserir funções JavaScript como:

function addElement() {
   // Você pode fazer com .getElementById se preferir
   var produtos = document.getElementByClassName('classe_da_div').length;

   if ( produtos == 0 ) {
      produtos.style.height = "800px";
   }
}

Ou se preferir você pode tentar uma solução em jQuery (mais prático):

$('.classe_da_div:not(:has(div))').addClass('aumentar-altura');

Nesse caso ele só puxa a div e diz: Caso ele não tenha outra div dentro, recebe a classe X.

[saidmrn 26]

/* Resposta da Questão 1 */

De forma alguma. Usar media queries é a melhor das soluções (já que evita de você ter que apelar pros inlines no HTML ou até mesmo JS). Você só precisa colocar ele nos media já prontos do bootstrap, sem ter que criar mais alguns com resoluções aleatórias.

 

/* Resposta da Questão 2 */

Esse caso é bem comum e o HTML/CSS estão exercendo seu papel naturalmente quando não existem produtos. Vamos pensar como se isso fosse LEGO, certo? Se você não tem peças abaixo, você não consegue estruturar a parte de cima e é isso que o HTML faz. Se ele entende que não existem elementos, ele pega o mais próximo pra encaixar (position: relative padrão).

 

Pra resolver isso, você pode inserir funções JavaScript como:

function addElement() {
   // Você pode fazer com .getElementById se preferir
   var produtos = document.getElementByClassName('classe_da_div').length;

   if ( produtos == 0 ) {
      produtos.style.height = "800px";
   }
}

Ou se preferir você pode tentar uma solução em jQuery (mais prático):

$('.classe_da_div:not(:has(div))').addClass('aumentar-altura');

Nesse caso ele só puxa a div e diz: Caso ele não tenha outra div dentro, recebe a classe X.

gênio!

Obrigado!