iframe com height infinito | Front-end | Alura

3
respostas

por César Gatto Figueiredo

| 65.5k xp | 18 posts

Boa noite a todos!

Estou criando uma página onde existe um menu que, ao clicar nos itens do mesmo, aparece diretamente o conteúdo em um iframe logo abaixo.

O problema é que alguns conteúdos são muito extensos e o iframe limita o height, mesmo que eu coloque height: 100% ou auto. Não adianta, não funciona, já tentei de tudo.

Eu gostaria que esse iframe fosse infinito de acordo com o conteúdo, ou seja, "auto". E gostaria também que não tivesse barra de rolagem no iframe, apenas uma barra da página como um todo.

Alguém poderia me ajudar?

Desde já agradeço.

3 respostas

por Guilherme Maciel Rocha

| 39.5k xp | 12 posts

20/10/2022

Eu uso height: fit-content; Para que a caixa tenha o tamanho do conteúdo, depois apenas ajusto o tamanho do conteúdo.

Pode te ajudar a esconder a barra de rolagem:

overflowY: hidden; (eixo vertical)

overflowX: hidden; (eixo horizontal)

Qualquer coisa me chama no discord: M.Chris#2715

por César Gatto Figueiredo

| 65.5k xp | 18 posts

20/10/2022

Oi Guilherme! Obrigado pela ajuda, mas não está funcionando...

Eu coloquei assim no meu CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

}

iframe {
    width: 100%;
    border: none;
    height: fit-content;
}

Até inverti os heights de lugar (do body, html pro iframe e vice-versa), mas o resultado é o mesmo. Só aparece um pedaço do conteúdo do iframe e da página como um todo.

A respeito da barra de rolagem, só funcionou quando configuro no HTML, com o overflow no CSS não funcionou.

<iframe id="iframe" name="iframe" src="paginas/principal.html" frameborder="0" scrolling="no"></iframe>

por Guilherme Maciel Rocha

| 39.5k xp | 12 posts

21/10/2022

Coloca seu código todo aqui