Ir para conteúdo

POWERED BY:

Arquivado

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

ulfreitas

[Resolvido] coluna com altura de 100%

Por , em Desenvolvimento frontend

Recommended Posts

ulfreitas    6

ulfreitas
Postado

Boa tarde

Tó com um problema aqui, em uma div tem um background que deveria repetir até o fim do site, mas a div não tá pegando a altura toda;

 

Como eu faço para deixar uma div com altura de 100%? Ela já está dentro de outra div.

eu tentei colocar o height = 100% mas não vai.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Poste o link ou o código do css e html

Pela sua descrição deveria estar funcionando

então fica difícil prever o erro sem ver o que está acontecendo.

 

#DIV{
	width: 100%;
	height: 800px;
	background: red;
}
#esquerda{
	width: 200px;
	height: 100%;
}

Seu css deve estar mais ou menos assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ulfreitas    6

ulfreitas
Postado 

#corpo {padding-top: 20px; width: 100%; background: #fff;}
#col_esq {float: left; width: 68%; margin-left: 10px; background: url(imagens/bg_corpo.jpg) no-repeat bottom left;}
#noticias {float: left; width: 29%; height: 100%; background:url(imagens/bg_noticias.jpg) repeat-y; padding: 10px 0 0 8px;}


<div id="corpo">
   <div id="col_esq">
      <h3>Resumo das nossas atividades principais</h3><br />
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Proin vitae quam ut dolor tempus cursus a a sapien. 
          Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</h5>
      
      <ul class="lst_esquerda">
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
 	     <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
      </ul>
                  
      <ul class="lst_direita">
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
	     <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
	     Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
	     <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
	     <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
	     Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
             <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
	     <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
      </ul>
                 
   </div><!-- COL_ESQ -->
        
   <div id="noticias">
      <h3>Notícias</h3><br />
      
      <p>05/04/2010</p>
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin vitae quam ut dolor tempus cursus a a sapien.</h5><br />
      
      <p>05/04/2010</p>
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin vitae quam ut dolor tempus cursus a a sapien.</h5><br />
      
      <p>05/04/2010</p>
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin vitae quam ut dolor tempus cursus a a sapien.</h5><br />
		
  </div><!-- NOTICIAS -->

</div><!-- CORPO -->

Bom a div #corpo terá a altura de acordo com o conteudo inserido nela, o problema tá nas divs #col_esq e #noticias que não chegam até o fim da coluna corpo.

 

Dá pra entender?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não entendi muito bem, mas é isso?

 

 

<html>
<head>
<style>
#corpo {padding-top: 20px; width: 100%; background: #fff;}
#col_esq {float: left; width: 68%; margin-left: 10px; background:blue; height: 100%; padding: 10px 0 0 8px;}
#noticias {float: left; width: 29%; height: 100%; background:red; padding: 10px 0 0 8px;}
</style>
</head>
<body>
<div id="corpo">
   <div id="col_esq">
      <h3>Resumo das nossas atividades principais</h3><br />
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Proin vitae quam ut dolor tempus cursus a a sapien. 
          Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</h5>
      
      <ul class="lst_esquerda">
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
      </ul>
                  
      <ul class="lst_direita">
         <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
             <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
             <li><img src="imagens/marcador.png" />Lorem ipsum dolor sit amet
             <p>Proin vitae quam ut dolor tempus cursus a a sapien. 
             Vestibulum erat risus, molestie eget eleifend et, accumsan a turpis.</p></li>
      </ul>
                 
   </div><!-- COL_ESQ -->
        
   <div id="noticias">
      <h3>Notícias</h3><br />
      
      <p>05/04/2010</p>
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin vitae quam ut dolor tempus cursus a a sapien.</h5><br />
      
      <p>05/04/2010</p>
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin vitae quam ut dolor tempus cursus a a sapien.</h5><br />
      
      <p>05/04/2010</p>
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Proin vitae quam ut dolor tempus cursus a a sapien.</h5><br />
                
  </div><!-- NOTICIAS -->

</div><!-- CORPO -->
</body>
</html>

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

ulfreitas    6

ulfreitas
Postado

então deveria ser mas fica estranho pq as divs noticias e col_esq parece que não ficam dentro da div corpo.

Tipo no Dreamweaver a div corpo fica em cima das outras divs, ai as divs noticias e col_esq ficam em baixo e não ficam com 100% de altura, mesmo na marcaçao do código css a div corpo estar englobando estas duas.

 

Ficou confuso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Sim... heheheh Entendi nada da sua explicação.

 

Poste imagens com o erro.

 

Não use o Dreamweaver para visualizar o resultado. Use um browser, mesmo, de preferência que siga os padrões.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

ulfreitas    6

ulfreitas
Postado

hehehe foi mal Thiago, o negócio tava tão cabuloso q nem eu entia bem.

 

Bom acabei achando uma solução, em um site ai q agora nao me lembro qual era, tinha um código mais ou menos assim:

 

#corpo {overflow:hidden; padding-top: 20px; padding-right: 260px; background: #fff;}
* html #corpo{height:1%; /* So IE plays nice */}
#col_esq {width: 100%;  float:left; margin-left: 10px; background: url(imagens/bg_corpo.jpg) no-repeat bottom left;}
#noticias {width:230px; float:left; margin-right:-260px; padding-left: 10px;  padding-top: 20px; background:url(imagens/bg_noticias.jpg) repeat-y;}

então deixei a div #noticias com uma largura fixa, e na div corpo poderia ter feito aquele esquema de faux colum que tem lá no site do maujor, mas no meu caso o layout não permitia, mas num caso simples esse método já funciona.

 

Valeu pela ajuda ;)

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