Ir para conteúdo

POWERED BY:

Arquivado

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

Evair

Como prolongar DIV mesmo quando sem conteúdo

Por , em Desenvolvimento frontend

Recommended Posts

Evair    0

Evair
Postado

Como estender uma DIV na vertical mesmo sem conteúdo?

 

 

 

 

 

 

 

Boa noite.

 

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:

Atual-1.jpg

 

Mas o objetivo é, fazer com que a aparencia da estrutura fique parecida com esta outra foto:

Objetivo.jpg

 

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Quando eu faço isso eu faço me baseando no rodapé.

 

Eu uso o "clear: both;" no rodapé pra ele ficar fixado no final da página e coloco ele dentro do meu conteúdo que vai estar com "overflow: hidden;". Simples.

 

Segue os passos:

1 - Coloque a DIV do rodapé dentro da DIV do conteúdo

2 - Coloque o termo/função abaixo no CSS da DIV do rodapé

clear: both;

3 - Na DIV conteúdo coloque no CSS o termo/função abaixo:

overflow: hidden;

 

Não testei, mas eu uso assim. Testa aí.

[]s,

Diéssica Gurskas

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jean Martins    0

Jean Martins
Postado

bom eu ja faço de outro jeito, eu deixo a div rodapé dentro da div "tudo" mas fixo para ficar embaixo das outras(clear:both) e dentro da div conteudo colocaria a div usuario e fixaria uma altura para que ficasse ate embaixo.

 

na div usuario:

 


div usuario
{
  width: 300px; // quantidade pixel desejada
height: 400px;  // quantidaade de pixel desejada.

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

bom eu ja faço de outro jeito, eu deixo a div rodapé dentro da div "tudo" mas fixo para ficar embaixo das outras(clear:both) e dentro da div conteudo colocaria a div usuario e fixaria uma altura para que ficasse ate embaixo.

 

na div usuario:

 


div usuario
{
  width: 300px; // quantidade pixel desejada
height: 400px;  // quantidaade de pixel desejada.

}

 

Também é válido Jean.

Compartilhar este post

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

Informação importante

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

  Aceito