Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
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