Problema com rodapé[RESOLVIDO]
Resolvi o problema através desse tutorial:
http://www.cssstickyfooter.com/using-st ... -code.html
é um site nota 10 que existe especificamente para esse problema.
Abaixo o código:
Original em inglês
How to Use the Sticky Footer Code
Be sure to read the Known Issues at the bottom of this page. It will help prevent a lot of mistakes that can take hours to debug.
Introduction
There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
Ryan Fait's solution is well known, and it works, but it requires an extra <div> with no content in it to provide an extra "push". Some HTML purists may find this a blasphemous use of non-semantic code. Our solution avoids the extra <div>.
The Sticky Footer solution presented here is based upon the information found in the Exploring Footers article from A List Apart as well as expands upon the work of Cameron Adams and this piece at lwis.net.
In an early version it applied a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. Instead, after some feedback, this updated version simply uses overflow:auto, suggested by Joel Pittet, to do the same task. Paul O'Brian suggested the addition of display:table for IE 8, as well his sticky footer article here got a nice suggestion for a fix in Opera which we used here as well. It's been tested in over 50 browsers and seems to work great.
The HTML Code
Below is the basic structure of the HTML code. You'll notice how the footer <div> sits outside of the wrap <div>.
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
You would place your content elements inside the main <div>. For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
If you wanted to place any elements outside of either the wrap or the footer then you would need to use absolute positioning else it messes up the 100% height calculations.
The CSS Code
Below is the CSS code that makes your sticky footers actually stick to the bottom.
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
And on your html page you will need this conditional, primarily for IE8;
<!--[if IE 8]>
<style type="text/css">
#wrap {display:table;}
</style>
<![endif]-->
You'll notice that the footer height is used three times. This is important and should be the same value for all three instances. The height properties are stretching the wrap <div> to the full height of the window. The negative margin of the footer brings it up into the padding created for the main <div>. Since the main rests inside the wrap the padding height is already part of the 100%. Thus the footer rests at the bottom of the page.
The conditional statement is neccessary to allow IE8 to expand beyond the 100% height should the content be longer. The other hack, for Opera,
No Need for Clearfix Hack!
Many CSS designers will be familiar with the Clearfix Hack. It solved a lot of problems with floating elements. A previous version of this Sticky Footer solution used it. Instead, a more modern and easier to code solution is the overflow statement. We apply it to the main <div> to help get the footer to stick in Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and your sidebar to the other. The floating content elements inside the main <div> can cause the footer to become un-stuck in some browsers.
Known Issues
Heights and Margins
Using top and bottom margins inside some elements may push your footer down by that margin height, perhaps in a header or the wrap or main <div>'s themselves. Instead use padding to create spacing inside the element. You'll notice this is happening if your page has little content so that the footer should be on the bottom but you see that your window scroll bar on the side indicates that it is sitting a bit below the window bottom. Go find the offending top or bottom margin and switch it to padding.
Be carefull with declaring padding on the main <div> in another part of your style sheet. If you were to add something like this; padding:0 10px 0 10px; you would end up overwriting the important bottom padding that is supposed to be the same as your footer height. This would cause your footer to start overlaping your content on your longer pages (in Google Chrome).
Watch out if you are using a border on your footer. If you add a 1px border to a 200px high footer, then you need to use 201px as your negative margin in in #footer and 201px as your padding bottom in #main to compensate for that extra 1pixel.
Font Sizes
When setting font sizes in your style sheet, if you use relative sizing be aware that some viewers may have their monitor settings create bigger font sizes. In some elements, like in the footer itself, it could break the height settings and create a gap below the footer if there is not enough room left for the text to expand lower. So try using absolute sizing by using px instead of pt or em. Or simply leave plenty of room for text in your footer to expand.
E traduzido pelo Google Translator <!-- s:( --><img src="{SMILIES_PATH}/icon_e_sad.gif" alt="
" title="Triste" /><!-- s:( -->Como usar o código do rodapé Sticky
Certifique-se de ler os problemas conhecidos na parte inferior desta página. Ele irá ajudar a evitar muitos erros que podem levar horas para depurar.
Introdução
Existem vários métodos de rodapé pegajoso ser encontrada no Google. Eu tentei muitos deles e eles costumam falhar em alguns aspectos. O problema parece é que alguns desses métodos são antigos e podem ter trabalhado em navegadores mais antigos, mas não em versões mais recente do navegador. Como essas páginas são antigas, e foram fortemente ligado também no passado, eles ainda alta classificação no Google. Muitos webmasters procurando uma solução final pegajosa rodapé até coçar a cabeça como eles tentam estes mesmos métodos antigos, porque eles são os primeiros acabam encontrando quando busca.
Ryan Fait solução é bem conhecida, e ele funciona, mas exige uma <div> extra sem conteúdo nele para dar um impulso "extra". Alguns puristas HTML pode encontrar este usar um blasfemo de código não-semântico. Nossa solução evita a <div> extra.
A Sticky solução Rodapé aqui apresentado baseia-se na informação contida no artigo rodapés Exploração de A List Apart, bem como amplia o trabalho de Cameron Adams e este pedaço de lwis.net.
Em uma versão anterior a aplicação de uma correção claro truque para manter o rodapé no local no Google Chrome e outros navegadores, onde o rodapé que flutuam quando redimensionamos a janela. Em vez disso, depois de algum feedback, esta versão atualizada simplesmente usa overflow: auto, sugerido por Joel Pittet, para fazer a mesma tarefa. Paul O'Brian sugeriu a adição de display: tabela para o IE 8, bem como seu artigo rodapé sticky aqui tem uma boa sugestão para uma correção no Opera que usamos aqui também. Foi testado em mais de 50 navegadores e parece um grande trabalho.
O código HTML
Abaixo está a estrutura básica do código HTML. Você verá como o <div> rodapé fica fora do <div> wrap.
id="wrap"> <div
id="main"> <div
</ Div>
</ Div>
id="footer"> <div
</ Div>
Você colocaria seus elementos de conteúdo dentro do <div> principal. Por exemplo, se você estivesse usando um layout 2 colunas flutuantes que você pode ter isso;
id="wrap"> <div
id="main"> <div
id="content"> <div
</ Div>
id="side"> <div
</ Div>
</ Div>
</ Div>
id="footer"> <div
</ Div>
Um cabeçalho pode ser colocado no interior do envoltório, mas acima do principal como este;
id="wrap"> <div
id="header"> <div
</ Div>
id="main"> <div
</ Div>
</ Div>
id="footer"> <div
</ Div>
Se você queria colocar todos os elementos fora de qualquer quebra ou o rodapé, então você precisará usar o posicionamento absoluto senão ele bagunça os cálculos altura de 100%.
O código CSS
Abaixo está o código CSS que faz seu rodapés pegajoso realmente agarrarem ao fundo.
html, body, # wrap (height: 100%
body> # wrap (height: auto; min-height: 100%
# Principal (overflow: auto;
padding-bottom: 150px;) / * deve ser mesma altura do rodapé * /
# Footer (position: relative;
margin-top:-150px; / * valor negativo da altura do rodapé * /
height: 150px;
clear: both;)
/ * Fix Opera /
corpo: antes (
conteúdo: "";
height: 100%;
float: left;
width: 0;
margin-top:-32767px; /
)
E na sua página em HTML que você irá precisar dessa condição, principalmente para o IE8;
<!--[ If IE 8]>
<style type="text/css">
# wrap (display: tabela;)
</ Style>
<! [Endif] ->
Você notará que a altura do rodapé é usada três vezes. Isso é importante e deve ser o mesmo valor para todas as três instâncias. As propriedades de altura estão esticando o <div> moldar-se à altura total da janela. A margem negativa do rodapé traz para dentro do estofamento criado para o <div> principal. Uma vez que a principal reside no interior do envoltório altura padding já faz parte dos 100%. Assim, o rodapé descansa na parte inferior da página.
A instrução condicional é necessária para permitir IE8 expandir para além da altura de 100% do conteúdo deve ser mais longo. O hack outros, para a ópera,
Não há necessidade de Clearfix Hack!
Muitos designers CSS estará familiarizado com o Hack Clearfix. Ele resolveu um monte de problemas com elementos flutuantes. Uma versão anterior desta solução rodapé Sticky utilizado. Em vez disso, um mais moderno e mais fácil de código da solução é a declaração de estouro. Nós aplicá-la ao <div> principal para ajudar a tirar o rodapé de pau no Chrome. Ela também resolve problemas que surgem quando se usa um layout 2 colunas onde você flutuar o seu conteúdo para um lado e sua barra lateral para o outro. Os elementos de conteúdo flutuante dentro do <div> principal pode fazer com que o rodapé se tornar un-furado em alguns navegadores.
Problemas conhecidos
Heights e Margens
Usando margens superior e inferior dentro de alguns elementos podem empurrar o rodapé para baixo por essa altura da margem, talvez em um cabeçalho ou o envoltório ou <div> principal 's próprios. Ao invés disso use padding para criar espaço dentro do elemento. Você vai perceber que isso está acontecendo, se sua página tem pouco conteúdo, de modo que o rodapé deve ser no fundo, mas você vê que sua barra de rolagem do lado da janela indica que ele está sentado um pouco abaixo da parte inferior da janela. Vai encontrar a margem de ofender superior ou inferior e mude para o preenchimento.
Tenha cuidado com estofamento declarar no <div> principal em uma outra parte de sua folha de estilo. Se você tivesse que adicionar algo como isso; padding: 0 10px 0 10px; você acabaria substituindo o padding importante que é suposto ser a mesma que a altura do rodapé. Isso faria com que o seu rodapé para iniciar overlaping seu conteúdo em suas páginas mais (no Google Chrome).
Cuidado se você estiver usando uma borda em seu rodapé. Se você adicionar uma borda de 1px para um rodapé 200px de altura, então você precisa usar 201px como sua margem negativa em # rodapé e 201px como seu fundo estofamento em # main para compensar que 1pixel extra.
Tamanho da fonte
Ao definir o tamanho da fonte na sua folha de estilo, se você usar em relação dimensionamento estar ciente de que alguns espectadores podem ter suas configurações de monitor criar maiores tamanhos de fonte. Em alguns elementos, como no rodapé em si, que poderia quebrar as definições de altura e criar um fosso abaixo do rodapé, se não houver espaço suficiente para que o texto expandir mais baixos. Então, tente usar o dimensionamento absoluta usando px em vez de pt ou em. Ou simplesmente deixar bastante espaço para texto em seu rodapé a se expandir.
. Plataformas NET
Quando os sites de codificação para ASP.net, onde cada página é dentro de uma tag <form>, não se esqueça de adicionar a tag form para o height: 100% declaração, senão ele vai quebrar o rodapé pegajosa. Tal como este;
corpo, html, um formulário # wrap (height: 100%
Lucas Catani
[b:1bmpfj72]Blog[/b:1bmpfj72]: <!-- m --><a class="postlink" href=" www.l9web.com.br/blog/ " onclick="window.open(this.href);return false;"> www.l9web.com.br/blog/ </a><!-- m -->
[b:1bmpfj72]MSN:[/b:1bmpfj72] <!-- e --><a href="Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.">Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.</a><!-- e -->
[b:1bmpfj72]L9WEB | WEBSITES[/b:1bmpfj72] <!-- m --><a...
