1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Div em baixo, custe o que custar

Discussão em 'Web Development' iniciada por wazms, 2 de Março de 2009. (Respostas: 14; Visualizações: 7498)

  1. 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.

    [​IMG]

    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.

    [​IMG]

    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:

    [​IMG]

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

    [​IMG]

    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.
     
  2. Após tantas visitas continuo sem resposta :( começo a pensar que o que pretendo fazer é deveras complicado. :(
     
  3. fm.

    fm. Power Member

    Não estou muito dentro do assunto, no entanto.. as medidas não deveriam estar em %, para conseguires o efeito que pretendes?
     
  4. geoblast

    geoblast Power Member

    Para alguém te poder ajudar o melhor é postares aqui o código.
     
  5. 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>
     
  6. 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.
     
  7. unsilent

    unsilent Power Member

    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.
     
  8. 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: 3 de Março de 2009
  9. naoliveira

    naoliveira Power Member

    procura no google por min-height (nos browsers funciona no IE é que não) e por alternativas para "simular" o min-height no IE.
     
  10. 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?
     
  11. oscarolim

    oscarolim Power Member

    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.
     
  12. 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>

     
  13. 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.
     
  14. naoliveira

    naoliveira Power Member

    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.


     

Partilhar esta Página