[THCB]

Olá, pesquisei sobre como colocar o rodapé fixo no final da página independente do tamanho do conteúdo e achei um tutorial do maujor que peguei como exemplo, porém encontrei um problema que não sei como solucionar.

Aqui está o link do tutorial do maujor: http://maujor.com/tu...o-da-janela.php

E aqui estão meus códigos:

CSS

CÓDIGO

<style type="text/css" media="all">
* {margin:0;padding:0;}
html, body {height:100%;}
body {background:#ddd;color:#666;font:75%/1.4 Verdana, Arial, Helvetica, sans-serif;text-align:center;}
#tudo {width:760px;position:relative;background:#fff;margin:0 auto;text-align:left;min-height:100%;}
* html #tudo {height:100%;}
#topo {background:#cfc;width:760px;height:100px;text-align:center;}
#principal {width:510px;padding:20px;float:left;}
#auxiliar {width:150px;float:right;padding:20px;height:300px;background:#ccc;}
#rodape {background:#b0f1b0;width:760px;height:20px;position:absolute;bottom:0;text-align:center;}
h2 {font:bold 22px Arial, Helvetica, sans-serif;color:#060;}
.clear {clear:both;}
</style>

HTML

CÓDIGO

<div id="tudo">
        <div id="conteudo">
                <div id="topo">
                <h2>Topo</h2>
                </div>
                <div id="principal">
                <h2>Coluna principal</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>
                        <p>Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>
                        <p>Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>
                        <p>Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>
                        <p>Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
    </div>
                <div id="auxiliar">
                        <h2>Coluna auxiliar</h2>
                </div>
                <div class="clear"></div>
        </div>
        <div id="rodape">
        <p>rodape</p>
        </div>
</div>

PROBLEMA - No meu caso eu precisava que o rodapé tivesse uma altura de 300px. Porém quando eu coloco um height na div do rodapé, esta "come" o conteúdo. Peguem meu código e alterem a altura da div rodapé para 300px para verem.

Alguma idéia para arrumar isto?

Muito obrigado pela atenção =D

[xanburzum]

Devemos criar um código da seguinte forma:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”http://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>

Após ter o código base, devemos criar um arquivo css que informe que o corpo do documento tem o height de 100%.

html, body {
height: 100%;
}

* html #tudo {height: 100%;}

No trecho acima, informo para o html e body ter um height de 100%. E informo que a div#tudo deve ter um height de 100% também.

#tudo {

width: 790px;

margin: 0 auto;

text-align: left;

position: relative;

min-height: 100%;

}

Aqui está um ponto importante. Explicarei linha a linha deste trecho acima.

1. Largura fixa de 790px;
2. Centralizo o layout ao centro;
3. Alinha o texto do layout a esquerda;
4. Posiciono o container relativamente.
5. Defino que a altura minima será de 100% [ para navegadores mais recentes - FireFox por exemplo ]

#conteudo {
padding-bottom: 50px;
}

Acima foi definido um padding-bottom, apenas para o texto não ficar colado no rodapé.

#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
}

Explicarei linha a linha para ficar bem claro.

1. Posiciono ele absolutamente;
2. Coloca ele na posição 0 do rodapé;
3. Digo que terá uma altura de 35px;
4. Informo que a altura da linha será de 35px;
5. Alinho o texto ao centro;
6. Digo que a largura será de 100%;

Pronto temos o nosso layout completo. Abaixo está o código completo para quem quiser ver! Coloquei no código abaixo algumas cores, para vocês verem a diferença. Esqueci de comentar que para um melhor resultado sempre é bom utilizar a técnica de CSS Reset.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

* html #tudo {height: 100%;}

body {
background-color: #CCC;
}

#tudo {
width: 790px;

margin: 0 auto;

text-align: left;

position: relative;

min-height: 100%;

background-color: #FFF;
}

#conteudo {
padding-bottom: 50px;
}

#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
background-color: #0FF;
}

#cabecalho {
background-color: #FF0;
}
</style>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”http://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>