Ir para conteúdo

POWERED BY:

Arquivado

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

Filipe Alves

[Resolvido] Como expandir div verticalmente

Por , em Desenvolvimento frontend

Recommended Posts

Filipe Alves    0

Filipe Alves
Postado

Olá, estou tendo dificuldade para expandir uma div verticalmente a fim de preencher todo o espaço restante.

No código abaixo, a altura da DIV 1 depende da altura que a DIV 2 assume, que não é pré-definida, ou seja, sempre muda de forma aleatória.

A questão é: como expandir a altura da DIV 1 de acordo com a altura da DIV 2 a fim de preencher toda a altura da div CONTAINER restante?

Se alguém puder me ajudar, ficarei grato!

Obrigado..

 

Segue abaixo o código, como exemplo

 

<html>
<head>
<style type="text/css">
#container{
	float:left;
	width:400px;
	background-color:#000; /*Preto*/
}

#div1{
	float:left;
	background-color:#F00; /*Vermelho*/
}


#div2{
	float:left;
	background-color:#00F;/*Azul*/	
}
</style>
</head>
<body>

<div id="container">
	<div id="div1">
	Conteudo da Div 1
	</div>

	<div id="div2">
	<?php
	$rand = rand(0,20);
	for($i = 0; $i <= $rand; $i++) {
		echo "Conteudo da Div 2<br />";
	}
	?>
	</div>

</div>

</body>
</html>

 

Como está com esse código

Imagem Postada

 

 

Como gostaria que ficasse

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardoo Lima    0

Ricardoo Lima
Postado

olha...não sei se te serve essa solução, pq o fundo preto não aparece! daí só metendo um padding aonde você quiser na div container...

Tá aqui:

<html>
<head>
<style type="text/css">
#container{
	display:table;
	float:left;
        width:400px;
        background-color:#000; /*Preto*/
}

#div1{
	display: table-cell;
        background-color:#F00; /*Vermelho*/
}


#div2{
	display:table-cell;
        background-color:#00F; /*Azul*/  
		color:#FFF		}
</style>
</head>
<body>

<div id="container">
        <div id="div1">
        Conteudo da Div 1        
        </div>
        <div id="div2">
        
        <?php
        $rand = rand(0,20);
        for($i = 0; $i <= $rand; $i++) {
                echo "Conteudo da Div 2<br />";
        }
        ?>
        </div>

</div>

</body>
</html>

 

se você quiser pode mudar o display da div2 pra inline...Daí aparece o fundo preto, mas fica com espaços entre cada linha...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Filipe Alves    0

Filipe Alves
Postado

Perfeito cara! Testei aqui e deu certo!! Valeu pela ajuda!

Nunca entendi a propriedade display direito.

Eu acho que até tentei usar algo parecido, mas não tava tirando o 'float'.

Perfeito! Obrigado ae!

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

 

Opa, valeu cara!

Não sabia que o termo para isso era 'faux columns'.

Fazendo da forma que você sugeriu fica assim:

 

#container{
        width:400px;
        overflow:hidden;
        background-color:#000; /*Preto*/
}

#div1{
	float:left;
        background-color:#F00; /*Vermelho*/
        padding-bottom: 1000em;
        margin-bottom: -999.5em;
}


#div2{
	float:left;
        background-color:#00F; /*Azul*/  
	color:#FFF;
	padding-bottom: 1000em;
	margin-bottom: -999.5em;              
}

 

Dessa forma dá pra usar 'float', ao contrário do outro jeito usando display:table.

O detahle tá no overflow:hidden do container e nos valores

	padding-bottom: 1000em;
	margin-bottom: -999.5em;
das colunas.

Valeu hein!!

Das duas formas funciona de boa.

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

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