DIV preenchendo 100% da Janela
Pessoal a situação é a seguinte.
Tenho de desenvolver uma página de login com um "wallpaper" de fundo, conforme a imagem abaixo:
Basicamente, a página contém uma barra de topo, uma caixa de login ao centro (até aqui está ok) uma barra no rodapé, e a imagem de fundo que deve preencher toda a página e empurrar o rodapé sempre para o final da janela, pra preencher toda a janela. Ao menos acho que é +- isso hehe.
O que acontece: se defino a altura da div do wallpaper para 100%, a div não preenche toda a janela, apenas até o final da caixa de login, e o rodapé fica logo abaixo, sobrando muita página em branco.
Vou postar meu HTML e CSS também, peço que me ajudem a corrigir, sou novato em css, e to quebrando a cara pra tentar resolver faz dias:
index.html:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Painel Administrativo</title>
<link rel="stylesheet" type="text/css" href="css/960/960.css" />
<link rel="stylesheet" type="text/css" href="css/960/reset.css" />
<link rel="stylesheet" type="text/css" href="css/960/text.css" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
</head>
<body>
<div id="container">
<div id="template">
<div id="bar-top"></div>
<div class="clear"></div>
<div id="content">
<div id="box-login">
</div>
</div>
<div class="clear"></div>
<div id="bar-bottom"></div>
</div><!--template-->
</div><!--container-->
</body>
</html>template.css:
#container{width:100%; height:100%;}
#bar-top{background:url(../images/bar.png) #000 repeat-x; height:60px;}
#content{background:url(../images/background.jpg) #999 no-repeat top center fixed; margin:0 auto; width:100%; height:100%; float:left;}
#bar-bottom{background:url(../images/bar.png) #000 repeat-x; height:60px;}
#box-login{background:url(../images/box-login.png) no-repeat top center; display:block; margin:0 auto; margin-top:100px; width:322px; height:282px;}
Discussão (3)
Carregando comentários...