Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

hunternh

[Resolvido] Rodape sempre alinha com a margem inferior

Por , em Javascript

Recommended Posts

hunternh    2

hunternh
Postado

É necessário utilizar a jQuery:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="pragma" content="nocache" />
<meta name="author" content="Wagner Brandão Soares" />
<title>.: Rodapé no fundo :.</title>
<style type="text/css">
<!--
body
{
	margin: 0px;
	padding: 0px;
	text-align: center;
}

div.tudo
{
	width: 778px;
	margin: 0px auto;
}

div.cabecalho
{
	width: 778px;
	height: 100px;
	margin: 0px;
	background-color:#009966;
}

div.corpo
{
	width: 778px;
	margin: 0px;
	background-color:#660066;
}

div.rodape
{
	width: 778px;
	height: 100px;
	margin: 0px;
	background-color:#0066CC;
}
-->
</style>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript">
//<![CDATA[
	var divHeight = 0;
	rodape = function()
	{
			var de = document.documentElement;
			var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.offsetHeight;
			
			if(h > jQuery("#tudo").height())
			{
				jQuery("#corpo").css({"height":(jQuery("#corpo").height()+(h - jQuery("#tudo").height())).toString()+"px"});
			}
			else if(h < jQuery("#tudo").height())
			{
				jQuery("#corpo").css({"height":divHeight.toString()+"px"});
				if(h > jQuery("#tudo").height())
				{
					jQuery("#corpo").css({"height":(jQuery("#corpo").height()+(h - jQuery("#tudo").height())).toString()+"px"});
				}
			}
	};
	
	jQuery(document).ready(function()
	{
		divHeight = jQuery("#corpo").height();
		
		rodape();
		
		jQuery(window).resize(function()
		{
			rodape();
		});
	});
//]]>
</script>
</head>
<body>
	<div id="tudo" class="tudo">
		<div id="cabecalho" class="cabecalho"> </div>
		<div id="corpo" class="corpo">
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
			teste<br />teste<br />
		</div>
		<div id="rodape" class="rodape"> </div>
	</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito