[Resolvido] Div 100% dentro de outra com 100%

[Rasp 3]

Galera, estou tendo uma senhora dor de cabeça aqui...

estou montando um layout que possui uma tecnica css para manter o rodapé width: 100%; sempre no rodapé... até ai tudo bem... o problema é o seguinte...

dentro dessa div "pai" (palco) eu possuo outras 2, que são: header e conteudo.

 

Preciso fazer com que o conteudo fique com height: 100%, já tentei de várias formas que conheço e simplismente não consigo...

Será que alguem poderia dar uma luz?

 

CSS

html, body { height: 100%; background: #d9d9c3; }

#palco { height: 100%; background: url(../images/bg_palco.png) repeat-x top; }

body > #palco {
	height: auto;
	min-height: 100%;
}

hr { display: none; }

/* Clear Fix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* Fim Clear Fix */

#header, #conteudo, #bottom div {
	width: 780px;
	margin: 0 auto;
	position: relative;
}

#header { padding: 0 20px; width: 740px; height: 143px; background: orange; }

#conteudo { padding: 0 20px 102px; width: 740px; background: white; }

#bottom { position: relative; clear: both; margin: -82px 0 0 0; height: 82px; background: brown; }

HTML

<div id="palco">
		<div id="header">
		</div>

		<hr />

		<div id="conteudo" class="clearfix">
		</div>
	</div>

	<hr />

	<div id="bottom">
	</div>

Exemplo com texto na div conteúdo: http://logmania.net/exemplo.html

Exemplo sem texto na div conteúdo: http://logmania.net/exemplo2.html

 

O site da tecnica é o seguinte: http://www.cssstickyfooter.com/

[William Bruno 1501]

Tenta com isso aqui:

http://imasters.com.br/artigo/9065/css...aixo_da_janela/

[Rasp 3]

Fala William, cara nao consigo abrir... tá dando erro do gateway

 

Opa então... segui o tutorial... mais o mesmo problema ocorre... o conteudo não fica 100% é utilizada uma imagem para isso, só que eu não posso usá-la porque no caso do exemplo do maujor a div "tudo" eu tenho um outro background que fica por cima do background do body... =/

 

Ps: funciona perfeitamente no IE6, 7, 8 com o conteudo 100% mais no firefox não

 

Galera... será que isso é um bug no firefox ou no IE? cada tentativa me faz pensar algo diferente...

tentei agora pouco fazer da pior forma possivel... usando tabelas... mais também dá bug o rodapé não fica perfeito nos IEs... =/

[Rasp 3]

Pessoal... pode fechar o tópico... desisti de fazer isso...

 

abs

[Thiago Retondar 18]

Rasp,

 

em amos os browser mencionados por você estão iguais.

 

Onde está o erro?

 

Não desiste não. Agente ajuda. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Rasp 3]

Então Thiago...

Está normal pq está sem conteudo... acabo de colocar.. dá uma olhada no drama... já testei tudo que consegui imaginar até agora e sem dá problemas, ou num browser ou no outro...

 

Abs e valeu! ;)

[Thiago Retondar 18]

Vamos primeiro ajeita o seu XHTML. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Por que colocar um código inteiro XHTML dentro de um comentário? Não entendi;

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Tire aquelas tabelas. Para o que deseja, não é necessário;

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Se sua tabela é quem vai ocupar todo o espaço da tela, para que um background-color nela e no body?

 

Faça as modificações e volte a postar. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Rasp 3]

Respondendo suas perguntas...

Eu edito os arquivos diretamente dentro do servidor... por isso o codigo comentado, era o antigo e como não dá pra ficar copiando e colando o tempo todo prefiro comentá-lo... até pq não atrapalha em nada.

 

A questão dá tabela foi para efeito de testes...

A cor de background de fundo sabe-se que é para testar possiveis erros... a melhor forma de saber o "porque" de um erro é colorindo o elemento e caso não apresente problemas, remove-se a cor depois.

 

 

De toda forma, eu voltei as divs e coloquei também outro link lá em cima... um com texto na div conteudo e outro sem para visualizarem o problema que não está me deixando dormir. rs

 

Absss e valeu a ajuda.

[William Bruno 1501]

Tive que dar uma simplificada no código, para você entender melhor como funciona a técnica para o efeito.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: 0;
	color: #666;
	font-family: Arial, "Trebuchet MS";
	font-size: 14px;
	list-style: none;
	text-decoration: none;
}
body {
	background-color: gold;	
}
html, body {
		height: 100%;
}
#palco {
	width: 740px; /* esse elemento é que vai fazer a técnica */
	margin: 0 auto;
	position: relative;
	min-height:100%;
	background: white; /* É aqui que temos o background do conteudo na verdade */
}
#header { 
	width: 740px; 
	height: 143px;
	background: orange;
}
#conteudo {
	width: 740px;
	padding-bottom: 82px;
}
#bottom {  
	position: absolute; 
	bottom: 0; 
	width: 100%; 
	height: 82px; 
	background: brown;
}
</style>
</head>
<body>
	<div id="palco">
		<div id="conteudo">
			<div id="header">
			</div><!-- /header -->


		</div><!-- /conteudo -->
		<div id="bottom">
			teste
		</div><!-- /bottom -->
	</div><!-- /palco -->
</body>
</html>

Percebi que você queria o rodapé em 100% de largura do browser.. para isso, eu colocaria uma imagem de backgrund com a cor do rodapé posicionada no bottom e com repeat-x no body.

 

Poste uma imagem do layout final, se os backgrounds tiverem dando problemas para posicionar.. No link que você postou, não vejo imagens... apenas as cores puras.

[Rasp 3]

Opa William... tudo certo cara?

Mais uma vez valeu pela ajuda ai... eu inclusive usei esse método só que o que acontece e eu também esqueci de falar aqui... esse layout foi projetado por um outro cara e eu possuo 2 background... até ai tudo bem pois coloco outra div com z-index: 1 atras do layout e um background no body, porém, fico pendente na questão do rodapé em ficar 100%, como você mencionou testei com imagem e fica bacana, porém tenho esse problema dos backgrounds.

 

Coloquei mais um link com seu exemplo mais a div onde entraria o outro background http://www.logmania.net/exemplo3.html, aí agora só não sei como fazer o rodapé 100%.

 

Abraços!

[Thiago Retondar 18]

Para deixar o rodapé 100%, você coloca width: auto na div#palco e define uma largura exata para o elementos filhos que você deseja que não tenha 100% de width.

 

Abraços.

[William Bruno 1501]

Então cara, ai para o rodapé, você faz como eu disse, posiciona um filete no body, com um background da cor do rodapé, e deixa ele bem grande(alto), e manda repetir apartir do bottom.

 

Qual seria o outro fundo ? pq esse, eu não vejo outra saída à não ter um elemento absoluto posicionado atrás de tudo com z-index..

 

@edit:

Acabei de pensar em outra coisa..

Se você colocar uma faixa com a largura do site, como background do #palco, com um back-position: center repeat-y, você pode tirar o limitador de width desse elemento, ai o rodapé voltaria à ter os 100% de width do body, já que o próprio #palco poderia ter os 100% de width tb... mas enfim.. poste um screen de como é o layout final, para analizarmos melhor e propormos a solução acertada para os posicionamentos das imagens de BG

[Rasp 3]

Opa William e Thiago,

 

Juntei exatamente a dica dos 2 e consegui o resultado "simulando" a div #conteudo com ima imagem repetindo em y com o #palco a width 100%. mais tarde estarei disponibilizando o link com a questão resolvida.

 

Abraços e valeu a ajuda ;)