Problema com Height Iframe

[oomaikoo 0]

Galera, to colocando um iframe em minha pagina wordpress, iframe de um site, beleza ta funcionando, só que eu defini Width e Height 100%, , mas só o Height (Altura) só aparece 150 pixels mesmo eu colocando 100% e no dispositivo móvel ele não se adequa a tela, alguém pode me ajudar?

[Natan S. 6]

Este é um comportamento normal pois a propriedade height por padrão não ocupa 100% do viewport (área onde seu site aparece).

 

O valor que height recebe é somente o necessário para acomodar verticalmente o conteúdo e se baseia na altura de seu elemento pai.

 

Se o pai não tem altura, logo a altura é indefinida e por isso o height só terá um tamanho suficiente para cobrir o conteúdo.

 

Para resolver isto basta determinar que o pai tenha uma altura de 100% e com base nisto, se todo elemento baseia sua altura no pai logo não resolveria o problema definir que o container que engloba um elemento tenha 100% pois, este também se baseia em outro elemento.

Portanto, devemos definir os elementos HTML e BODY que são os "pais" de todos os outros com uma altura de 100% porque só assim os outros elementos poderão ocupar 100% do viewport visto que só se pode definir a altura de um elemento em % (porcentagem) quando seu pai possui uma altura definida.

Exemplo com iframe ocupando 100% de largura e altura: http://jsbin.com/halerofeya/edit?html,css,output

Recomendo a leitura: Por que height 100% não funciona

 

Também vale citar que você pode utilizar a unidade VH ao invés de %. O VH (Viewport Units) se baseia na largura do viewport dessa forma você só precisa definir a altura do próprio elemento como 100vh.

Exemplo com VH: http://jsbin.com/digunuzuri/edit?html,css,output

OBS: A unica desvantagem em usar Viewport Units é a compatibilidade como pode ser visto no Caniuse http://caniuse.com/#feat=viewport-units