3 linhas -> 25px, 25px e restante% (height)

[xhelton 0]

Olá.

Fiz algumas buscas no forúm, se tiver algum tópico semelhante, por favor indique.

 

Tenho o seguinte problema, 3 linhas:

- a primeira com 25px de altura

- a segunda com 25px de altura

- e gostaria que a terceira ocupe o restante da tela em percentual.

 

Coloquei percentuais na primeira e na segunda, porém não fui feliz. Se alguém tem uma dica ou sugestão....

 

Obrigado, desde já.

[inforsis 1]

xhelton, Boa Tarde!

Você pode postar um link ou parte do código, para o pessoal observar como você tentou fazer? E assim poder te auxiliar melhor...

 

E existe aqui no fórum um tópico do Giovani que mostra como trabalhar com tabelas, ele pode te ajudar.

 

Trabalhando com tabelas

 

Até Mais. ;)

[xhelton 0]

<style type="text/css">
.linha1 {
	height:25px;
	background-color:#8d8d8d;
}
.linha2 {
	height:25px;
	background-color:#f4f4f4;
}
.linha3 {
	height:100%;
	background-color:grey;
}
</style>
<div class="linha1">1</div>
<div class="linha2">2</div>
<div class="linha3">3</div>

seria basicamente este código... na linha3(100%), gostaria de colocar o restante..

[inforsis 1]

xhelton, Boa Tarde!

Então o faoto de você citar o termo "linha" acabou me confundindo um pouco... (achei que estivesse usando tabelas...).

Mais então para este seu problema, você já pensou em usar a Técnica "Faux Columns", dá uma olhada no tópcio.

 

Até Mais. ;)

[RoXbY 3]

Mais então para este seu problema, você já pensou em usar a Técnica "Faux Columns", dá uma olhada no tópcio.

opa... acho que não inforsys

 

neste caso, em minha opinião:

 

css (antes do body*)

<style type="text/css">
html,body{
	margin:0px;
	height:100%;
}
.linha1 {
	height:25px;
	background-color:#8d8d8d;
}
.linha2 {
	height:25px;
	background-color:#f4f4f4;
}
.linha3 {
	height:100%;
	background-color:grey;
}
</style>

 

 

 

 

html:

<div class="linha1">1</div>
<div class="linha2">2</div>
<div class="linha3">3</div>

 

*editando---

só agora que percebi um problema que já me deparei anteriormente enquanto trabalhava com tamanhos definidos e porcentagens...... quando aplico dois objetos com tamanhos definidos, neste caso "linha 1 e 2" e após outro com 100% (linha 3), ele acaba que o 100% pegue o total da página e mais o tamanho definido, isso não é bom... não mesmo!!! Extrapola o tamanho que eu realmente estava esperando para o 100%, no caso completar a página e não ultrapassar o limite.

 

Bem, neste caso é fácil, apenas basta diminuir as porcentagens para 90%, certo?? aih, não :// é complicadinho trabalhar com porcentagens, vai que o usuário acesse com resolução diferente, aí o 90% teria que ser 80% devido aos pixels definidos estaticamente.. grrrr..

 

alguém tem como dar uma mão?

[brcontainer 16]

nesse caso é melhor que o a LINHA3 seja na verdade uma visão da DIV superior uma DIV pai

 

o que você quer é isso:

 

---------------------------

linha1 25px

---------------------------

linha225px

---------------------------

linha3 100%

 

 

 

---------------------------

 

o resultado seria isso:

<style type="text/css">
.pai{
	height:100%;
	background-color:grey;
}
.linha1 {
	height:25px;
	background-color:#8d8d8d;
}
.linha2 {
	height:25px;
	background-color:#f4f4f4;
}
.linha3 {
	height:auto;
	background-color:transparent;
}
</style>
<div class="pai">
<div class="linha1">1</div>
<div class="linha2">2</div>
<div class="linha3">3</div>
</div>

[xhelton 0]

Valeu galera pelo suporte. :)

[xhelton 0]

nesse caso é melhor que o a LINHA3 seja na verdade uma visão da DIV superior uma DIV pai

 

o que você quer é isso:

 

---------------------------

linha1 25px

---------------------------

linha225px

---------------------------

linha3 100%

 

 

 

---------------------------

 

o resultado seria isso:

<style type="text/css">
.pai{
	height:100%;
	background-color:grey;
}
.linha1 {
	height:25px;
	background-color:#8d8d8d;
}
.linha2 {
	height:25px;
	background-color:#f4f4f4;
}
.linha3 {
	height:auto;
	background-color:transparent;
}
</style>
<div class="pai">
<div class="linha1">1</div>
<div class="linha2">2</div>
<div class="linha3">3</div>
</div>

 

Na verdade a linha três não ocupa todo o espaço, o 'auto' utiliza o necessário.. se colocar 'background-color' no estilo 'linha3' da pra ver melhor. Por exemplo: coloque background-color:black;

 

Eu estou precisando de algo que preencha o restante, porém não gostaria que as linhas 1,2 ficasse por cima da 3, 'absolute' por exemplo.

 

Valeu ae

[brcontainer 16]

então mas é para isso que criei a DIV#pai para ela fazer esse efeito ;)

coloquei uma cor laranja para você entender ;)

<style type="text/css">
.pai{
	height:100%;
	background-color:#fc0;
}
.linha1 {
	height:25px;
	background-color:#8d8d8d;
}
.linha2 {
	height:25px;
	background-color:#f4f4f4;
}
.linha3 {
	height:auto;
	background-color:transparent;
}
</style>
<div class="pai">
<div class="linha1">1</div>
<div class="linha2">2</div>
<div class="linha3">3</div>
</div>

[xhelton 0]

ae silverfox .. consegui graças a seu tuto ;)

Bem isso que estava procurando.. ainda bem que olhei seu perfil ueuehue

 

valeu

 

ScornInPc estou tentando o dia todo lhe ajudar mas ainda não consegui fazer esse efeito

só consegui com JAVASCRIPT... o que você acha dessa ideia??

deixa só lhe fazer uma pergunta por que fazer uma página redimensinavel na vertical??

é só por curiosidade que eu quero saber ;)

 

[atualizado]Conseguiiiii!!!

hehe espero que seja isso que você queira:

<style>
*{
margin:0px;
height:0px;
}
html,body{
width:100%;
height:100%;
}
#topo{
	width:500px;
	height:144px;
	background:#ff0000;
	position:absolute;
	z-index:2;
}
#centro{
	width:500px;
	height:100%;
	background:#00ff00;
	position:absolute;
	z-index:1;
	top:-31px;
}
#interno{
	height:auto;
	margin-top:174px;
}
#rodape{
	width:500px;
	height:31px;
	background:#0000ff;
	position:absolute;
	bottom:0px;
	z-index:4;
}
</style>
<div id="topo">topo</div>
	<div id="centro">
		<div id="interno">conteudo</div>
	</div>
<div id="rodape">rodape</div>

[brcontainer 16]

bem tecnicamente o primeiro exemplo funciona igual ao da minha TUTO só que a tuto é para o efeito height:100%

no meio e o que eu postei aqui no seu tópico é para o efeito height:100%; abaixo

 

então mas é para isso que criei a DIV#pai para ela fazer esse efeito wink.gif

coloquei uma cor laranja para você entender

 

analiza bem que você vai perceber ;)

[programador php 0]

tenho uma alternativa!!

 

#linha3 {
	min-height: 385px;	
	height: auto !important;
	height: 385px;
}

abraço

[brcontainer 16]

tenho uma alternativa!!

 

#linha3 {
	min-height: 385px;	
	height: auto !important;
	height: 385px;
}

abraço

programador php a linha3 tem de ocupar o espaço restante da tela o qual a linha1 e linha2 deixaram

o meu código é uma "simulção" ;P , a linha3 ao inves de ocupar o resto quem ocupa é a DIV pai que

faz o efeito necessario ;)

[Sbbrubles 0]

Olá, tenho aparentemente a mesma dúvida que o colega que iniciou o tópico e tentei todas as dicas aqui contidas e nada surtiu o efeito desejado.

 

Segue código:

CODE

<!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>Untitled Document</title>

<style>

html,body{

width:100%;

height:100%;

margin:0px;

}

 

#div_mae {

border:2px solid #FF00FF;

height:99%;

width:99%;

margin:auto;

}

 

#linha1 {

position:relative;

width:100%;

height:20px;

background-color:#FF0000;

}

 

#linha2 {

position:relative;

width:100%;

height:200px;

background-color:#00FF00;

}

 

#linha3 {

position:relative;

width:100%;

height:auto;

background-color:#00FFFF;

}

 

</style>

 

</head>

 

<body>

<div id="div_mae">

<div id="linha1">Linha 1</div>

<div id="linha2" style="display:;">Linha 2</div>

<div id="linha3">Linha 3<br /><a style="cursor:hand; color:#000;" OnClick="if (document.getElementById('linha2').style.display == 'none') { document.getElementById('linha2').style.display = '' } else { document.getElementById('linha2').style.display = 'none' };">[ocultar linha 2]</a><br />

<iframe width="100%" height="100%" frameborder="1" scrolling="auto" style="height:100%; width:100%;"></iframe>

</div>

</div>

</body>

</html>

LINK COM O RESULTADO DO CÓDIGO ACIMA

 

Possuo duas linhas superiores com tamanhos definidos e quero que a terceira tome o restante da página de acordo com o tamanho da tela e resolução do usuário.

 

Aplicando a propriedade height:100%, a linha 3 toma 100% da página MAIS os tamanhos das linhas 1 e 2 gerando, assim, scroll indesejável.

 

Aplicando height:auto, a linha 3 não toma o restante da página, mas somente o tamanho de seu conteúdo. Como utilizarei um iframe (que quero que tome o resto da página) mesmo aplicando 100% nas propriedades do iframe, ele não toma a página inteira.

 

Um detalhe... Sei que se criasse as divs de tamanho definido do topo (linahs 1 e 2) com propriedade de posicionamento absolute e uma outra ocupando realmente a página toda (linha 3), bastava eu inserir o conteúdo nesta div e aplicar uma margem no topo do tamanho das divs fixas. Porém, com isso, eu perco a propriedade do link ocultar, que faz a linha 2 sumir e a linha 3 tomar seu espaço.

 

Alguma luz?

 

[]'s