[Resolvido] Altura 100% com tableless

[Detonador PHP 1]

Olá pessoal, deu uma respondida num tópico parecido, mas como o caso era um pouco diferente, resolvi criar um tópico com o assunto certo.

Estou montando um site que ocupe toda a janela do navegador. O problema é o seguinte:

 

html { height: 100% }
body { height: 100% }
conteúdo { height: 100% }
cabeçalho { height: 80px }
miolo { height: 100% }
base { height: 50px }

Este é basicamente o meu css.

O que acontece é o seguinte. A intenção é que toda a janela do navegador seja ocupada. Dai com o miolo 100% de altura pegou. O problema que ele cia uma janela com 100% de altura, baseada na altura do navegador, e ainda adiciona 80px do cabeçalho mais 50px da base. Dai ele cria uma barra de rolagem.

 

Como faço pra ele ocupar toda a janela do navegador sem criar barra de rolagem?

[William Bruno 1501]

A idéia pra essa ténica, é criar um 'novo body'. Ele sim terá o min-height de 100%.

Os outros elementos devem ir dentro desse 'novo elemento'.

 

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

[Detonador PHP 1]

Opa. Ontem mesmo estudei esta alterativa. Me corrijam se eu estiver errado, mas esta técnica se chama Faux Collun que seria coluna falça. Ela funcionou, mas sinceramente não gostei da "maneira" como ela foi trabalhada.

 

Porque pense bem, hoje foi preciso alinhar a o rodapé do site a base, mas e se eu tiver dentro de uma div a necessidade de alinha a base?

 

Não teria como eu dizer que ele tem 100% de altura em relação ao pai e não ao navegador, porque é isso que acontece hoje. Você coloca 100% de altura, então ele pega a altura do navegador para se basear! Mas vamos supor que a janela do meu navegador esta com 600px de altura. Certo? Dai eu coloco um cabeçalho com 100px de altura e uma base com 50px de altura. A janela do meu navegador ficou com altura disponível no centro de 450px. Ai que entra a minha dúvida! Não da para a div do miolo no caso ficar com 100% de altura referente aos 450px que sobraram ao invés de ficar com 100% de altura referente aos 600px do navegador?

[William Bruno 1501]

Opa. Ontem mesmo estudei esta alterativa. Me corrijam se eu estiver errado, mas esta técnica se chama Faux Collun que seria coluna falça. Ela funcionou, mas sinceramente não gostei da "maneira" como ela foi trabalhada.

Em partes.

Faux Columns foi até usado ai.. Mas não era o foco.

Para posicionar o rodapé no bottom, e deixar o 100% de height, ele fez a única maneira correta mesmo. (que funciona)

Porque pense bem, hoje foi preciso alinhar a o rodapé do site a base, mas e se eu tiver dentro de uma div a necessidade de alinha a base?

~coloque essa div externa com position relative, e a interna com um absolute, e bottom: 0;

 

Não teria como eu dizer que ele tem 100% de altura em relação ao pai e não ao navegador, porque é isso que acontece hoje. Você coloca 100% de altura, então ele pega a altura do navegador para se basear!

Sim. A idéia de min-height de 100%, é para esses casos do layout ter que ocupar toda a altura da viewport do navegador.

Mas vamos supor que a janela do meu navegador esta com 600px de altura. Certo? Dai eu coloco um cabeçalho com 100px de altura e uma base com 50px de altura. A janela do meu navegador ficou com altura disponível no centro de 450px. Ai que entra a minha dúvida! Não da para a div do miolo no caso ficar com 100% de altura referente aos 450px que sobraram ao invés de ficar com 100% de altura referente aos 600px do navegador?

 

Só fazendo da forma que te disse no outro tópico em que você perguntou.

Colocando o cabeçalho de 100px, e a base de 50px, dentro do elemento com 100%!

Ou então, sei lá.. usar Javascript para calcular a altura disponível, e ai trabalhar com medidas precisas(e perigosas), em pixels.

 

Oque não é nada aconselhável. Se você fizer assim, da forma que falei, posicionando os elementos de altura fixa, dentro da marcação do elemento de height 100%, você consegue o efeito.

[Detonador PHP 1]

beleza... pode colocar como resolvido!

hehehe... depois quando aparecer outras necessidades eu pergunto mais!

Abraços e obrigado pelas respostas!

[Detonador PHP 1]

Gostaria de saber como faz pra deixar a div conteúdo ocupando o resto da janela do navegador. No caso tenho a div Cabeçalho, conteúdo e base, e gostaria que a div conteúdo cobrisse o espaço que as divs cabeçalho e base não ocuparam.

 

Ai vão meus códigos:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sistema Teste</title>
<link href="css/geral.css" rel="stylesheet" type="text/css" />
</head>

<body>
	
<div id="site">
    
<div id="cabecalho">Cabeçalho</div>
        <div id="conteudo">Conteúdo</div>
    <div id="base">Base</div>
    
  </div>
    
</body>
</html>

CSS:

html{
	height:100%;
}

body{
	height:100%;
	margin:0;
	padding:0;
}

#site{
	min-height:100%;
}

* html #site{
	height:100%;
}

#cabecalho{
	height:191px;
	background-color:#099;
}

#conteudo{
	background-color:#963;
	min-height:100%;
	position:relative;
}

#base{
	height:84px;
	background-color:#F90;
	width:100%;
	position:absolute;
	bottom:0;
}

Aguardo um retorno!

Abraço a todos!

[Thiago Retondar 18]

Coloque height: 100% no #conteudo. ;)

 

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

[Detonador PHP 1]

Não funcionou. Isso eu já desconfiava. Não sei se porque sou iniciante, mas estou achando bem complicado colocar qualquer coisa em 100% de altura.

 

Meu Site

 

Como faço para aquela div conteúdo chegar senão até a base, terminar de ocupar o resto do navegador?

[2Flex 1]

Olá,

 

Aqui fica o CSS:

* {
	margin: 0px;
	padding: 0px;
}

body{
	background-color:#014272;
}

#site{
	min-width:950px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#333;
}

#cabecalho{
	height:191px;
	background-image:url(../imagem/cabecalho/bg.jpg);
	background-repeat:repeat-x;
}

#efeito_luminoso{
	background-image:url(../imagem/cabecalho/efeito_luminoso.jpg);
	background-repeat:no-repeat;
	position:absolute;
	z-index:0;
	width:612px;
	height:129px;
	top:0;
	left:0;
}

#menu_nivel_01{
	float:left;
	padding-left:152px;
	padding-top:101px;
}

#menu_nivel_01 ul{
	list-style:none;
}

#menu_nivel_01 ul li{
	float:left;
}

#menu_nivel_01 ul li a{
	background-image:url(../imagem/cabecalho/menu_esq.jpg);
	background-position:left;
	background-repeat:no-repeat;
	padding:10px 0px 7px 0px;
	text-decoration:none;
	display:block;
	color:#003F69;
}

#menu_nivel_01 ul li a strong{
	background-image:url(../imagem/cabecalho/menu_dir.jpg);
	background-position:right;
	background-repeat:no-repeat;
	padding:10px 10px 7px 8px;
}

#dados_usuario{
	float:right;
}

#logo_cliente{
	background-image:url(../imagem/cabecalho/logo_cliente.jpg);
	background-repeat:no-repeat;
	position:absolute;
	z-index:1;
	width:100%;
	height:191px;
}

#conteudo{
	background-color:#963;
	height:100%;
	width: 100%;
	position:absolute;
}

#base{
	height:84px;
	background-color:#F90;
	width:100%;
	position:absolute;
	bottom:0;
}

O HTML manteve-se ;).

Qualquer duvida em relação ao que foi feito apite, que a gente explicamos.

 

Cumprimentos

[Detonador PHP 1]

Opa. Valew pela dica. Mas funcionou em partes apenas. Agora ele criou uma barra de rolagem que é típica de quando se colocar 100% de altura com a div,

 

Meu site

Eu tinha chegado nesse resultado já, mas como faz pra acabar com aquela barra de rolagem?

[2Flex 1]

Olá,

 

Amigo torna-se complicado, porque está a usar duas medidas fixas e uma outra variável. O que pode fazer é declarar uma medida mínima com o min-height depois com um height: auto para quando o conteúdo for definido ele aumentar automaticamente. É sempre complicado nestas situações de certas medidas fixas e outras não. Eu vou me deitar agora, mas amanha se tiver tempo ajudo-o a tentar resolver esse pequeno quebra-cabeças.

 

PS: Ainda precisa da ajuda ou acabou por resolver sozinho?

 

Cumprimentos.