Altura 100%

#1 wesley.tome

24 Horas

Usuários
422 posts

Sexo:Masculino

Posted 19/06/2007, 16:26

Fala galera, blz? É o seguinte, quero a altura de 100% na div container, funciona no IE e no firefox só funciona se eu tirar o DOCTYPE e o xmlns. Como resolvo isso?

Segue minha página xhtml.

<!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" xml:lang="pt" lang="pt">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Teste</title>	
	<style>
	html {height: 100%;}
	body {min-height: 100%;}
	* html body {height: 100%;}
		
	* {
	   padding:0px;
	   margin:0px;
	} 
	
	/* layer principal, centralizador */
	#container {		
		height: 100%;
		display: table;
		border:1px solid red;
	}
	#spacer_container {
		position: static;
		display: table;
		width: 772px;
		height: auto;	
		z-index: 2;	
	}
	</style>
</head>

<body>

<div id="container">
	<div id="spacer_container">123</div>
</div>

</body>
</html>

Edição feita por: wesley.tome, 20/06/2007, 13:52.

.................

#2 lwirkk

Veterano

Usuários
1314 posts

Sexo:Não informado

Posted 20/06/2007, 04:55

Estavo com o mesmo problema, e me ajudaram aqui no fórum mesmo a resolver, aqui, tenta colocar na ID que deseja isso:

overflow:visible;height:100%;

No caso o height já está definido por você, coloca o outro que falta para ver.

E um link que pode ajudar:
-- LINK --

Edição feita por: lwirkk, 20/06/2007, 05:07.

"Se quiser ser feliz por um dia, vingue-se; se quiser ser feliz por uma vida inteira, perdoe."

Muito Obrigado à todos do fórum, e à toda equipe do fórum!

#3 wesley.tome

24 Horas

Usuários
422 posts

Sexo:Masculino

Posted 20/06/2007, 13:50

Fala irmão, po não funcionou não, só funciona se eu tirar o DOCTYPE e substituir <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt"> por <html> só.

Segue abaixo...

Valeus.

<!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" xml:lang="pt" lang="pt">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Teste</title>	
	<style>
	html {height: 100%;}
	body {min-height: 100%;}
	* html body {height: 100%;}
		
	* {
	   padding:0px;
	   margin:0px;
	}
	
	/* layer principal, centralizador */
	#container {		
		display: table;
		height: 100%;
		overflow:visible;
		border:1px solid red;
	}
	</style>
</head>

<body>

<div id="container">
	asasas
</div>

</body>
</html>

Edição feita por: wesley.tome, 20/06/2007, 13:52.

.................

#4 lwirkk

Veterano

Usuários
1314 posts

Sexo:Não informado

Posted 20/06/2007, 20:49

Olá amigo, fazendo uns teste aqui, consegui fazer o quê queria: dê uma olhada.

<!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" xml:lang="pt" lang="pt">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Teste</title>	
	<style>
	html {height:100%;}
	body {width:100%;height:100%;}		
	* {padding:0px;margin:0px;}
	
	/* layer principal, centralizador */
	#container {border:1px solid red;height:100%;width:500px;margin:auto;}
	</style>
</head>

<body>

<div id="container">
	asasas
</div>

</body>
</html>

Se você colocar na ID #container em 99% a altura ficará sem a barra de rolagem tanto do IE, e no FF. (o quê pelo menos pra mim é melhor) ^^.

Edição feita por: lwirkk, 20/06/2007, 20:53.

"Se quiser ser feliz por um dia, vingue-se; se quiser ser feliz por uma vida inteira, perdoe."

Muito Obrigado à todos do fórum, e à toda equipe do fórum!

#5 wesley.tome

24 Horas

Usuários
422 posts

Sexo:Masculino

Posted 28/06/2007, 13:53

Valeus lwirkk.

Funcionou direitinho. Tentei um monte de vezes e não estava conseguindo.

Obrigado.

:rolleyes:

.................

#6 bimonti

Super Veterano

Usuários
2654 posts

Sexo:Masculino

Posted 28/06/2007, 17:26

Acho que alterando o DOCTYPE para Strict já resolveria. Ia deixar os 2 sem funcionar. ^^

Apesar de não funcionar nos 2 é o comportamente esperado. Uma div com height 100% vai oucpar esse tamanho em relação ao elemento pai, por exemplo o body. Se o body não tem tamanho definido, a div ocupa o mínimo possível. Então tem definir um tamanho para todos os elementos pai do elemento que vai ficar com o tamanhos de 100%, exemplo:

html{ height:100%}
body{ height:100%}
.div{ height:100%}

WebFórum - Equipe de Desenvolvimento - Monitor

Yeah I do have some stories, and it's true I want all the glory ...

#1 wesley.tome

#2 lwirkk

#3 wesley.tome

#4 lwirkk

#5 wesley.tome

#6 bimonti

1 user(s) are reading this topic

Entrar