Div em baixo, custe o que custar

W

wazms

Membro
Ora boas,
Antes de mais obrigado pela atenção e disponibilidade em lerem este post.

Tenho um site composto por duas divs. A primeira envolve todo o conteúdo do site, e a segunda, envolve o footer.
O footer está a 20px de distancia do conteúdo.

Quando o site é visionado num monitor cuja a resolução do Height seja menor do que a do website, nao ha qualquer problema.
Pois o footer está "escondido" no fundo do site.

1.jpg


E mesmo que o utilizador faça Scroll até ao fim do site, nao ha problema... pois o scroll nao lhe permite ir mais alem do que o footer.

2.jpg


No entanto, quando o height to monitor é maior que o do site, o footer mantém a distancia dos 20px e sobe... acompanhando o site.
E acontece o que a seguinte ilustração mostra:

3.jpg


Só que... o que devia de acontecer nesta situação era o footer ficar preso ao bottom do browser, como ilustra a seguinte figura:

4.jpg


Com o position:relative; ou position:static; ele faz este comportamento que acabo de vos descrever.

Com o position:absolute; fica no fundo do browser, só que sobrepõe-se ao resto do conteudo, e quando o height do site é maior do que a do monitor... ele fica fixo, e nao acompanha o scroll do user.

Com o position:fixed; o footer sobrepõe-se ao resto do conteudo, e acompanha sempre o scroll do user.


Como é óbvio estou receptivo a ideias / sugestões.
 
Não estou muito dentro do assunto, no entanto.. as medidas não deveriam estar em %, para conseguires o efeito que pretendes?
 
geoblast disse:
Para alguém te poder ajudar o melhor é postares aqui o código.
Clicar para expandir...

Tens toda a razão, é capaz de facilitar.
Transcrevo-vos o código total da página em questão.

Se o facto do footer ter de manter os 20px de distancia do conteudo, pode-se colocar ali outra div "invisivel" com 20px de height... só para ocupar o lugar.

Nota: Esse deve de ser o DOCTYPE usado, agradecia que evitassem altera-lo. Mas, se for realmente necessário, estou aberto a sugestões.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TESTE</title>
<style type="text/css">
body
{
background-color:#FFF691;
margin:0;
text-align:center; /* para o IE */
font-family:Verdana, Arial, Sans-Serif;
font-size:0px; /* para o IE */
}

div#conteudo
{
margin:0 auto;
height:800px; /* height para testes */
width:960px;
overflow:auto; /* para o IE */
background-color:#529200;
}

div#footer
{
left:0;
bottom:0;
margin-top:20px;
width:100%;
height:60px;
background:#B37101;
}
</style>
</head>
<body>
<div id="conteudo"></div>
<div id="footer"></div>
</body>
</html>
 
Não querendo ser chato... mas acabando por se-lo... lol!
Agradecia que não se esquecessem do meu problemazinho...

Não estou à espera que me resolvam as coisas comigo de braços cruzados... só que realmente tenho tentado solucionar este problema e não tenho conseguido. Também não tenho encontrado websites com algo identico ao que pretendo... o que dificulta... pois poderia consultar-lhes o código.

Por isso... mesmo que não saibam solucionar, agradeço que me enviem algum /alguns websites que sejam identicos ao que pretendo fazer.
 
Boas, isso parece-me complicado/impossivel de conseguir só com css, tal como tu dizes isso não é propriamente algo que eu já tenha visto em algum site.
Provavelmente,para conseguires esse comportamento, tens que definir a posição do footer dinâmicamente (javascript), consoante a altura da div#conteudo e da janela do browser do user.
 
humm...

suponho que podia alternar a propriedade de CSS position.
Aplicando position:static; quando a janela fosse maior do que o height do site e alternar para position:fixed; quando esta fosse menor.

Mas para isso teria de saber as dimensões da janela... não sei até que ponto é-me possivel obter a resolução de ecran do user. É que depender da dimenção height da janela é mt relativo... pode estar diminuida na altura que ele visiona o site... mas se ele aumenta-la depois... já vai provocar confuzão.

Não sei... é a minha teoria relativamente ao JavaScript.

Quanto à CSS andei a investigar e visto que com position:absolute; ou position:fixed; o footer sobrepoe-se ao conteudo.
Entao nao sei até que ponto um z-index nao poderia resolver isto. Andei a fazer uns testes porem sempre em vão.
Talvez pelo z-index desse para colocar ambos os divs na mesma "camada" impedindo assim a sobreposição e forçando o footer a descer... nao sei.
 
Última edição:
naoliveira disse:
procura no google por min-height (nos browsers funciona no IE é que não) e por alternativas para "simular" o min-height no IE.
Clicar para expandir...

Conheço a propriedade min-height. Mas não estou a entender como me pode ajudar.
Por favor corrige-me caso esteja errado:
Digamos que coloco min-height:1000px; se conteudo for pequeno o footer vai ficar distante e não me garante que fique exactamente no fundo do ecran... pk o user pode ter 1 ecran com 1200px de height por exemplo... restando ainda cerca de 200px de area vazia após o footer ter terminado.
Não?
 
Se o teu footer for de 100 pixeis de altura, coloca um padding-bottom de 100 pixeis na div do conteudo, e mantem o position absolute no footer.
 
oscarolim disse:
Se o teu footer for de 100 pixeis de altura, coloca um padding-bottom de 100 pixeis na div do conteudo, e mantem o position absolute no footer.
Clicar para expandir...

Tentei fazer o que me disses-te, mas nao funcionou na mesma.
Em baixo transcrevo-te o codigo que coloquei. Agradeço que me corrijas, caso tenha feito uma utilização incorrecta do que me disseste.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TESTE</title>
<style type="text/css">
body
{
background-color:#FFF691;
margin:0;
text-align:center; /* para o IE */
font-family:Verdana, Arial, Sans-Serif;
font-size:0px; /* para o IE */
}

div#conteudo
{
margin:0 auto;
height:800px; /* height para testes */
width:960px;
overflow:auto; /* para o IE */
background-color:#529200;
padding-bottom:80px;
}

div#footer
{
left:0;
bottom:0;
width:100%;
height:60px;
background:#B37101;
position:absolute;
}

</style>
</head>
<body>
<div id="conteudo"></div>
<div id="footer"></div>
</body>
</html>

 
Agradeço muito a colaboração de todos vocês e o esforço que fizeram pra solucionar este meu problema.

Mas acabei usando uma artimanha para solucionar este problema.
Infelizmente nao ficou como pretendia, mas "visualmente" deixa de ser desagradável.
A solução consistiu em colocar um background-color da mesma cor que o footer.
A div conteudo esta envolta por outra com 100% de width que aplica a cor amarela ao fundo.
Assim o site mantém o aspecto pretendido, mas o footer (que sobe) não parece estar "pendurado" ali do nada.

No entanto... e por curiosidade... até porque pode vir a fazer falta "amanha", eu vou continuar a procurar a solução nos meus tempos livres. Se a encontrar, posto aqui, agradecia que fizessem o mesmo.

Pois para o meu projecto já nao vai ser usado, mas pode vir a ajudar alguem.
 
Estava a pensar que usasses javascript para sacares o height do monitor do user e ajustares ao min-height. Mas parece o slack_guy já arranjou a solução no primeiro link do post dele.


wazms disse:
Conheço a propriedade min-height. Mas não estou a entender como me pode ajudar.
Por favor corrige-me caso esteja errado:
Digamos que coloco min-height:1000px; se conteudo for pequeno o footer vai ficar distante e não me garante que fique exactamente no fundo do ecran... pk o user pode ter 1 ecran com 1200px de height por exemplo... restando ainda cerca de 200px de area vazia após o footer ter terminado.
Não?
Clicar para expandir...
 
Inicie sessão ou registe-se para poder participar.
Back
Topo