Como fazer um div se adequar ao tamanho do conteudo

[igorrolim]

Tenho uma div com o seguinte código css..

.painel {
	width: 880px;
	height: inherit;
	position: relative;
	left: 10px;
	top: 170px;
	margin: 0;	
	overflow: visible;
}

Dentro dessa div tem um iframe, gostaria de fazer a div se adequar ao tamanho do conteudo do iframe. As vezes tem algumas linhas outras várias dezenas, etc. Mas por alguma razão o tamanho da div fica só um estreita faixa. Já tentei height: "auto". tudo que é overflow etc. Nao estou conseguindo achar a solução pra isso.

[nicolas.tanski]

Para fazer a Div se ajustar automaticamente ao tamanho do iframe ou da página procure trabalhar com porcentagem, por exemplo:

.painel {

width: 100%;

height: inherit;

position: relative;

left: 10px;

top: 170px;

margin: 0;

overflow: visible;

}

Mude a porcetagem para que se ajuste do jeito que ficar melhor.

Falou!

[igorrolim]

Para fazer a Div se ajustar automaticamente ao tamanho do iframe ou da página procure trabalhar com porcentagem, por exemplo:

Mude a porcetagem para que se ajuste do jeito que ficar melhor.

Falou!

Mas se eu fizer isso ele vai ficar de um tamanho fixo. Eu quero que ele se adeque ao tamanho da página. O width já é fixo, é pra ser mesmo nao tem problema, mas o height quero que se adeque ao tamanho da página.

[nicolas.tanski]

Então trabalhe com a porcentagem no Height.

Dê uma olhada neste tutorial, apesar de ser destinado a alinhar Div's no rodapé da página tem alguns códigos CSS para fazer o alinhamento

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Falou!

[igorrolim]

Então trabalhe com a porcentagem no Height.

Dê uma olhada neste tutorial, apesar de ser destinado a alinhar Div's no rodapé da página tem alguns códigos CSS para fazer o alinhamento

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Falou!

Amigo a porcetagem apenas calcula o tamanho da area visualizavel e calcula o valor referente a ela. O que estou querendo expandir o tamanho vertical da div quando ela tiver um conteudo maior e contrair quando ela tiver menor.

[Shankar]

Não entendi muito bem o que você está querendo. Você colocou o iframe com que tamanho? Poderia colocar o HTML disso? Vai ficar melhor de entender o que está acontecendo e o que você pretende.

Mas de ante-mão, o overflow não vai te ajudar nisso.

[igorrolim]

Não entendi muito bem o que você está querendo. Você colocou o iframe com que tamanho? Poderia colocar o HTML disso? Vai ficar melhor de entender o que está acontecendo e o que você pretende.

Mas de ante-mão, o overflow não vai te ajudar nisso.

div que tem o iframe dentro, já tentei colocar o height dele "auto", mas quando faço isso fica apenas uma faixa estreita com barra de rolagem.

<div class="painel" id="painel">
      <iframe 
      src="mainframe.html"
      name="mainFrame" 
      id="mainFrame" 
      title="mainFrame"
      scrolling="auto"
      height="100%"
      width="100%"
      frameborder="0"

      ></iframe>
    </div>

css que está linkado com o arquivo:

.painel {
	width: 880px;
	height: 400px;
	position: relative;
	left: 10px;
	top: 120px;
	margin: 0;	
}

O iframe vai abrir várias páginas, vai ter desde paginas com apenas 5 linhas até páginas com mais de 50 linhas (pois é um projeto de edicio com tudo bem detalhado).

A div tem um bg branco transparente. E a propria página em que a div está tem um bg com um sol poente bem bonito. Então a div vai sobrepor o bg da pagina e se adequar ao tamanho do conteudo que for aberto. Se for uma página com 5 linhas ela ter o tamanho de 5 linhas, se for uma de 50, ela ter o tamanho de 50.

Esse é apenas um escopo do que estou fazendo para entregar. A apresentação cabe na div. Mas a introdução nao. E aí cria barra de rolagem. Eu achei o espaço muito curto então quero mudar o layout para a div se adequar ao tamanho da página que abrir no iframe. Mas apenas mudar o height.

[Shankar]

Fica complicado fazer isso porque o iframe tem um tamanho fixo ou que se adeque ao tamanho da DIV. Logo, fica difícil você fazer a DIV se adequar ao tamanho do iframe (que é filho dele).

Talvez uma solução seja usar JS. Se você tiver conhecimento em jQuery, existe uma função que pega o tamanho em pixel dos elementos, ainda assim seria complicado pra você pegar o tamanho do conteudo do iframe...

[igorrolim]

Fica complicado fazer isso porque o iframe tem um tamanho fixo ou que se adeque ao tamanho da DIV. Logo, fica difícil você fazer a DIV se adequar ao tamanho do iframe (que é filho dele).

Talvez uma solução seja usar JS. Se você tiver conhecimento em jQuery, existe uma função que pega o tamanho em pixel dos elementos, ainda assim seria complicado pra você pegar o tamanho do conteudo do iframe...

Ah, então o correto que seria o contrário, colocar o iframe logo na página sem a div? E como ficaria então o código pro iframe se adequar ao tamanho do conteúdo? Dá para fazer isso?

[Shankar]

Ah, então o correto que seria o contrário, colocar o iframe logo na página sem a div? E como ficaria então o código pro iframe se adequar ao tamanho do conteúdo? Dá para fazer isso?

Bem, não foi bem isso que eu quis dizer. Não tem problema em colocar o iframe dentro da DIV, é até aconselhavel tanto em termo de organização do codigo, como manutenção.

Existem algumas soluções para o seu caso, uma delas é não usar frame, eles estão meio em baixa... fora de moda. No seu caso, principalmente, o conteudo a ser recarregado é minimo. Até esteticamente não fica muito legal uma barra de rolagem só em uma parte.

Ainda assim, se quiser usar frame, uma outra solução seria usar um frame normal, dividindo a pagina duas partes. Uma superior, para o topo, e um em baixo para o conteudo, logo, o fundo com o sol estaria nas paginas carregas no frame baixo.