Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal
Estou aprendendo a produzir layouts em tabless só que estou tendo um pouco de dor de cabeça com uma coisinha:
Eu quero colocar uma div onde estará o conteúdo com 100% de altura, coloquei body e html com height de 100% também conforme vi em alguns tutoriais disso pela net, procurei pelo forum masi não axei nada referente a esse tipo de problema que é assim:
Eu tenho um Topo e Um "meio" abaixo do topo, e logo abaixo do "meio" vem o conteúdo, essa div que tem o conteúdo tem 100% de height, só que: ela fica com o tamanho exato da janela em vez de apenas ocupar o restante do espaço na janela.
Ou seja
Tamanho do meu documento = janela toda (div de conteudo) + tamanho do topo + tamanho do "meio" + tamanho do rodapé
=
Barra de rolagem desnessessária.
O que eu devo fazer pra ela entender que é somente o restante do espaço??
Meu código é esse:
index.php
<?php include("header.php");// somente processamento de config PHP . Nada de HTML aqui. ?>
<!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">](http://www.w3.org/1999/xhtml)
<head>
<title><?php echo TITULO_SITE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/estilo.css" type="text/css" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
</head>
<body>
<?php include("topo.php"); ?>
<div id="layoutBorder" align="center">
<div id="centroTopo">
<img id="imgCentroTopo" src="imagens/pic01.jpg" width="335" height="193" alt="Informação" />
<div id="menu1CT"></div>
<div id="menu2CT"></div>
</div>
<div id="content">Conteúdo</div>
<?php include("footer.php"); ?>
</div>
</body>
</html>Meu arquivo layout.css
@charset "utf-8";
/ CSS Document /
body,td,th {
font-family: Trebuchet MS, Verdana, Geneva, sans-serif;
color: #000000;
} background-color: #241765;
margin: 0px;
padding: 0px;
} height: 100%;
}
#topoLaranja{
background-color: #F9B205;
width:100%;
height: 170px;
}
#conteudoTop{
width: 668px;
height: 150px;
background-color:#FFF;
}
#logo{
top: 48px;
left: 48px;
position: relative;
}
#slogan{
top: 42px;
left: 120px;
position: relative;
}
#layoutBorder{
height:100%;
}
#centroTopo{
width: 668px;
height: 193px;
background-color: #d4d5d6;
}
#menu1CT{
width: 147px;
height: 193px;
background-color: #bebebe;
float:left;
}
#menu2CT{
width: 186px;
height: 193px;
background-color: #d4d5d6;
float:left;
}
#imgCentroTopo{
float:left;
}
#content{
width: 668px;
height: 100%;
background-color: #fff;
text-align:left;
}Agredeço desde já.
Carregando comentários...