Apesar de já estar respondido aqui Div com height 100%, vou tentar clarear e explicar o comportamento, o DOCTYPE
para HTML5 assim como o para HTML4 com Strict funciona de maneira, assim como no Quirks mode (Internet Explorer 10), basicamente o elemento root
(geralmente) o html
recebe o scrollbar, no entanto isto varia no Gecko, o qual o scrollbar seria como no body
, de toda forma ao usar o DOCTYPE
para HTML5
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Observe o resultado:
Fiz os exemplos no Opera, mas ele é o mesmo motor do Google Chrome, então o comportamento é idêntico

Mesmo o scrollbar estando presente o "box" do elemento fica com o height
equivalente ao conteúdo, então mesmo que aplique height: 100%
em teu iframe isto não irá funcionar:

Então se aplicar o height 100% nos elementos <html>
e <body>
o iframe vai conseguir ficar em 100%, no entanto se o elemento estiver dentro de um DIV que estiver dentro de do BODY, você precisará aplicar height:100%;
para o DIV também, porque o 100% no html, body
só afeta os filhos do BODY
, mas não os "netos", também é necessário aplicar width: 100%;
nos elementos se você precisar usar width no iframe com porcentagem, ao invés de pixels, deverá ficar assim:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, .main, .main iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<iframe src="https://pt.stackoverflow.com"></iframe>
</div>
</body>
</html>
No entanto você pode notar que ficaram algumas margens no iframe e também notará que foram gerados scrollbars do body:

Então você tem que remover as margens:
html, body {
margin: 0;
padding: 0;
}
html, body, .main, .main iframe {
margin: 0;
width: 100%;
height: 100%;
}
.main iframe {
border: none; /* remove as bordas do iframes*/
}
No entanto dependendo do navegador (motor de renderização) pode ser que gere o scrollbar na vertical do BODY, você tem duas coisas que pode fazer, ou ajustar o box-sizing: content-box;
(ainda sim pode variar), ainda sim o que provavelmente vai ser mais eficiente é remover o scrollbar, assim você só usará o scrollbar do HTML e do BODY assim só irá usar o scrollbar de dentro do iframe:
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
html, body, .main, .main iframe {
margin: 0;
width: 100%;
height: 100%;
}
.main iframe {
border: none; /* remove as bordas do iframes*/
}
Alternativa
Existe uma alternativa simples que não irá depender de aplicar height:100%;
em cascata, basta usar position
(fixed
ou absolute
), note que scrollbar gerado é de dentro do IFRAME, o position: fixed
não afeta o conteudo e por isto não gera o scrollbar, diferente do position: absolute;
:
.main iframe {
border: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="main">
<iframe src="https://pt.stackoverflow.com"></iframe>
</div>
HTML vs PHP
Anderson notei teu comentário:
Será que só funciona em documento HTML, PHP não? O que será que impede de abrir 100%?
Não PHP não tem nada haver com client-side, o PHP não executa ao mesmo tempo que o HTML, PHP roda no server-side gera o HTML ou qualquer outro tipo de documento manda para o programa que trabalha o HTTP (Apache, IIS, Nginx, LightTTPD, etc) e este por sua vez envia como resposta pela internet geralmente e é recebido o HTML já processado, recomendo que leia estas postagens que fiz sobre o assunto: