Posição do rodapé CSS Ande de baixo para o fundo do navegador?

StackOverflow https://stackoverflow.com/questions/2571573

Pergunta

Estou tendo um problema com meu site http://artygirl.co.uk/pixie/about/ Parece que não consigo fazer com que o rodapé grude automaticamente no fundo do navegador e mostre o restante do meu plano de fundo. Existe uma solução melhor do que usar a posição: fixo ou absoluto?

Eu acho que existem outros estilos em excesso de alguns testes que faço no Firebug.

Obrigado pela sua ajuda Atenciosamente Judi

Foi útil?

Solução

Isso é sempre um pouco difícil, você pode aumentar o min-height da sua área de conteúdo, mas mesmo assim, se alguém tiver uma tela realmente grande, você veria a mesma coisa.

Você poderia usar um pouco de javascript para aumentar o min-height Se alguém tem uma enorme visualização, mas isso ainda é menos do que elegante. Não tenho certeza se existe uma solução somente CSS para isso.

Se você quiser experimentar o código acima que acabei de postar aqui: Detectar a presença da barra de rolagem com jQuery ainda é difícil? pode ser útil para você.

Outras dicas

CSS:

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

Html:

<div class="podbar">
    Put your footer here
</div>

Isso criará um pegajoso que sempre aparecerá na parte inferior da página e sobreporá tudo. Basta adicionar margem/preenchimento extra ao fundo do seu contêiner principal divs igual à altura do rodapé +5px Portanto, não sobrepõe seu conteúdo.

Funciona em praticamente todos os navegadores que testei.

Eu já usei a técnica neste artigo antes: Layout CSS: 100% de altura com cabeçalho e rodapé. Requer alguma marcação extra em seu HTML.

Defina a altura do HTML e o corpo como 100%, insira uma div contêiner com a posição de altura mínima e a posição relativa e aninhe o rodapé com a posição: absoluto, inferior: 0;

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

Aqui você tem um exemplo e explicação http://ryanfait.com/sticky-feoter/

Você pode definir um min-height sobre #content. Isso não fixa o rodapé na parte inferior do navegador especificamente, mas garantirá que você sempre possa ver uma certa quantidade do plano de fundo.

Como alternativa, usando JavaScript, você pode determinar a altura da janela do navegador e calcular o min-height por #content, e aplique -o usando JavaScript. Isso garantiria que o rodapé esteja sempre no local correto.

Eu descobri. O HTML tinha uma propriedade CSS para o fundo dizendo a cor branca.

Eu sempre prefiro rodapés de página por causa do conteúdo variável nas páginas. Eu uso uma margem superior do 5em para meus rodapés. Na maioria das vezes, sabemos a altura do conteúdo que pode ocorrer nas páginas.

Se você usar o Bússola biblioteca para Sass, há também outra opção. Você pode usar o bússola Mixin pegajoso (demonstração). Requer que o rodapé seja de altura fixa e que seu HTML tenha uma certa estrutura geral.

Não use Posição: Absoluto usar Posição: relativa em vez de.

.footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

Posição: Absoluto Atenderá -o à parte inferior da tela, enquanto a posição parente não ignorará outras divs, para que permaneça na parte inferior da página inteira.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top