Você está aqui: Web Grafismo Componentes Dicas CSS Sticky Footer Layout – It Sticks to the Bottom
CSS Sticky Footer Layout – It Sticks to the Bottom
Subscreva via RSS ♥ Email ♥ iGoogle Partilhe no Twitter ♥ Facebook ♥ Del.icio.us ♥ Digg ♥ EmailEsta solução para o footer que se cola no rodapé do website funciona em todos os browsers, incluindo o Google Chrome. Ele funciona com layout de 2 colunas e assim não obtemos uma janela do browser maior do que a normal, ao contrário das antigas soluções que você encontra ao pesquisar no Google. E, não precisará de nenhuma div vazia para criar este efeito.
Existem muitos métodos de colar o footer, é só pesquisar no Google. Muitos deles quando se tenta aplicar na nossa aplicação, falham em algumas medidas. Este problema parece dever-se às soluções actuais existentes serem apenas aplicáveis com sucesso em browsers mais antigos, onde agora com os mais modernos estas não funcionam.
A solução de Ryan Fait’s é bem conhecida, e funciona, mas requer uma div extra sem conteúdo. Alguns puristas de HTML acham esta ideia blasfémia por não usar código não-semântico. Esta solução evita a tal div extra.

Esta solução apresentada do Sticky Footer foi testada em +50 browsers e parece funcionar muito bem.
Código Fonte CSS: http://www.cssstickyfooter.com/style.css
Código Fonte HTML: http://www.cssstickyfooter.com/html-code.html
Demonstração: http://www.cssstickyfooter.com/using-sticky-footer-code.html
Requisitos: -
Licença: Gratuito
A Smashing Magazine está a oferecer-nos 6 templates Html & CSS com layout em .PSD (Photoshop) para podermos usar e editá-los sem qualquer restrição ou limitação. Por isso, sinta-se à vontade de os modificar ou comercializar nos seus projectos – os templates são absolutamente gratuitos e livres para utilização. A Magia dos Anos 70 Download: http://media1.smashingmagazine.com/images/xhtml-psd-templates/Shape-template.zip (.zip, [...]
UI.Layout foi inspirado pelo extJS border-layout, e recria essa funcionalidade como um plugin jQuery. O plugin UI-Layout pode criar qualquer visual UI que você possa pretender - desde simples cabeçalhos, barras laterais, a complexas aplicações com barras de ferramentas, paneis de ajuda, barras de estados, sub-formulários, etc.
Sobre o autor
User Interface Designer e Front End Developer. É autor do site Webgrafismo, onde dispõe novidades Open Source para Web Developers. Segue-o no twitter em @pedromagalhaesRespostas a “CSS Sticky Footer Layout – It Sticks to the Bottom”
O que tens a dizer?
Registar o seu Gravatar.
Componentes
jQuery Captify Plugin v1.1.1: "Captify é um plugin jQuery escrito por Brian Reavis para mostrar legendas de uma forma muito bonita, quando se passa o rato s..."
CSS Sticky Footer Layout - It Sticks to the Bottom: "Esta solução para o footer que se cola no rodapé do website funciona em todos os browsers, incluindo o Google Chrome. Ele fun..."
Boletim Metereológico com UNIQLO Calendar Blog Parts: "UNIQLO acabou de lançar o Calendar Blog Parts, o qual mostra um lindo calendário em Flash com o boletim meterológico. Você po..."
Lupa para Ampliar Imagens com jQuery: "JQZoom é uma lupa para ampliar imagens inline construído na plataforma muito popular - jQuery. É um script muito bom e fácil ..."
Aplicação em Ajax para Lista de Tarefas: "myTinyTodo é uma aplicação gratuita que permite inserir e gerir tarefas de forma muito simples e intuitiva. A aplicação é con..." Design
+20 Botões para Download em Photoshop e PNG: "Button-Download está a disponibilizar botões gratuitos com diferentes designs no formato PSD (Photohop) e PNG. Actualmente ex..."
35 Melhores Websites da Korea para Inspiração: "Como web designers, gostamos de desenhar algo que realmente surpreenda. E para o fazermos, precisamos de abrir os nossos olho..."
3 Templates para capas de CD / DVD em PSD: "Por acaso você tem CDs ou DVDs para os seus leitores? Os leitores geralmente gostam que lhes mostrem os seus trabalhos como é..."
Avatares, Caricaturas e Cartoons Online Gratuitos: "São imensas as aplicações online gratuitas que actualmente permitem gerar automaticamente o desenho de avatares e caricaturas..."
128 Ícones Gratuitos: Function Icon Set: "Com um estilo consistente e aspecto brilhante, estes ícones são muito bons para você ter na sua colecção. Estão incluídos alg..." Extras
Kaltura - Plataforma de Vídeo Open Source: "Com um clique, qualquer proprietário do site pode embutir vídeos com capacidades interactivas: um leitor de vídeo interactivo..."
Ferramenta SEO para melhorar o Ranking: "Website Grader é uma ferramenta de SEO (search engine optimization) que mede a eficácia de marketing para o seu website. Prov..."
3D Box - Gerador Automático de Capas CD e DVD: "3d package é um gerador aumtomático de caixas 3D que permite-lhe obter online vários tipos de caixas instantâneamente. Só te..."
Construir um Robot Cartoon Animado com jQuery: "Foi criado recentemente um Robot Cartoon Animado com jQuery. Através da criação de vários divs ordenados uns por cima de outr..."
jQuery e Componentes Javascript UI: "jQuery Tools é uma colecção com os componentes mais importantes de user-interface para os websites actuais. Este ficheiro úni..." Tutorial
3 Vídeos Tutoriais para Converter Photoshop em XHTML: "Após desenhar o layout do seu website em Photoshop, a fase seguinte consiste em converter o design em XHTML. Estes 3 vídeos t..."
Tutorial de site em jQuery com refrescamento AJAX: "James Padolsey é um freelancer web developer de Hampton, UK. Ele escreve sobre front-end web development. O seu tópico prefer..."
Twitter API em jQuery para colocar os Tweets no Website: "Se deseja colocar o status do Twitter no seu website, então esta API é para si. A aplicação é muito simples de implementar e ..."
Tutorial de Textura: Fibra de Carbono: "Como já reparou no layout da Webgrafismo, temos tendência para utilizar patterns desenhados no Adobe Photoshop para decorar o..."
API em jQuery Combina Múltiplas Contas do Twitter: "Tutorialzine acabou de criar um tutorial que ensina a criar uma API em CSS e jQuery para o Twitter que permite mostrar os seu..."
Interessante este CSS! Assim já vai dar para fazer umas coisas muito engraçadas nos rodapés das minhas próximas aplicações :)
Com certeza… Depois mostre algo que conseguiu agora que tem esta técnica CSS ;)