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 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: [...]
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.
Respostas a “CSS Sticky Footer Layout – It Sticks to the Bottom”
O que tens a dizer?
Registar o seu Gravatar.
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 ;)