Meu nome é Evair. Não sou profissional do ramo, mas gostaria de aprender sobre (X)HTML, CSS, entre outros. Pretendo aprende-los porque tenho em mente a criação de um site de ensino de idiomas, para o qual eu não queria investir um dinheiro no serviço de profissionais, sendo que eu nem estou certo de se a "coisa" vai vingar...
O meu problema deve de ser simples, mas eu de fato não estou conseguindo solucioná-lo, e coto com a colaboração de todos: Tenho duas DIV's, "usuario" e "conteudo", preciso de algum modo estende-las até a extremidade inferior do browser, mesmo quando elas não tenham conteúdo suficiente para tal. Já busquei em vários sites uma resposta para esta minha dúvida, mas eu só encontro exemplos quando tem um rodapé na parte inferior da página, e no meu caso não terá.... Seguem códigos para que analisem e assim possam me ajuda:
Atualmente, aparencia da estrutura é similar a esta foto:
Mas o objetivo é, fazer com que a aparencia da estrutura fique parecida com esta outra foto:
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">
<link rel="stylesheet" href="CSS/estrutura_principal.css" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITULO DO SITE</title>
</head>
<body>
<div id="tudo">
<div id="institucional">
institucional
</div> <!-- FIM DA DIV "INSTITUCIONAL" -->
<div id="cabecalho">
cabecalho
</div> <!-- FIM DA DIV "CABECALHO" -->
<div id="pagina">
<div id="usuario">
usuario
</div> <!-- FIM DA DIV "USUARIO" -->
<div id="conteudo">
<p>conteudo</p>
<p>conteudo</p>
</div> <!-- FIM DA DIV "CONTEUDO" -->
<div id="menu">
menu
</div> <!-- FIM DA DIV "MENU" -->
<div class="clear">
</div> <!-- FIM DA DIV "CLEAR" -->
</div> <!-- FIM DA DIV "PAGINA" -->
</div> <!-- FIM DA DIV "TODO" -->
</body>
</html>CSS:
@charset "utf-8";
/* CSS Document */
/* Configura o conteúdo das TAG's "HTML" e "BODY" */
html, body {
height:100%; /* configura para ocuparem 100% da área livre do browser */
}
/* Configura o conteúdo da TAG "BODY" apenas */
body {
margin:0px; /* Remove a margem existente em todas as DIV's do site */
padding:0px; /* Remove a margem existente em todas as PADDING's do site */
text-align:center; /* Centraliza o conteúdo de todas as DIV's. Só fei necessária esta propriedade CSS porque
o IE-5 não reconhece a propriedade "margin:0 auto", contida na regra CSS "#tudo" */
}
/* Configura o conteúdo da DIV "TUDO" */
#tudo{
background-color:#0FF;
min-height:100%; /* Determina que o conteúdo da DIV "TUDO" nunca ocupara menos que 100% da altura disponível no browser */
position:relative;
}
/* Configura o HACK "* html", que é compatível apenas com as versões IE-6 ou mais antigos.
Este hack somente foi necessário para corrigir incompatibilidades de propriedades CSS no IE-5 e IE-6 */
* html #tudo {height:100%;} /* Determina que o conteúdo da DIV "TUDO" nunca ocupara menos que 100% da altura disponível no browser */
/* Configura o conteúdo da DIV "PAGINA" */
#pagina {
background-color:#333;
width:1000px; /* Determina que a largura ocupada por esta DIV será de 1.000 pixels */
margin:0 auto; /* Remove as margens em todos os lados, centralizando todas as demais DIV's*/
min-height:100%;
}
/* Configura o conteúdo da DIV "INSTITUCIONAL" */
#institucional {
background-color:#F0F;
height:20px; /* Determina que o conteúdo da DIV "INSTITUCIONAL" ocupara 15 pixels da altura disponível no browser */
}
/* Configura o conteúdo da DIV "CABECALHO" */
#cabecalho {
background-color:#F00;
height:60px; /* Determina que o conteúdo da DIV "CABECALHO" ocupara 15 pixels da altura disponível no browser */
}
/* Configura o conteúdo da DIV "USUARIO" */
#usuario {
background-color:#0F0;
width:300px;
float:left;
min-height:100%;
}
/* Configura o conteúdo da DIV "CONTEUDO" */
#conteudo {
background-color:#00F;;
width:700px;
float:right;
min-height:100%;
}
/* Configura o conteúdo da DIV "MENU" */
#menu {
background-color:#FF0;
}
.clear {
clear:both;
}Para quaisquer esclarecimentos que se façam necessários, coloco-me a sua total disposição.
Agradeço por sua atenção. Grato, EVAIR.
