2013-08-09 3 views
0

Прежде всего, извините за мой английский. Я все еще учась, поэтому я постараюсь объяснить себя как можно лучше.Как я могу установить высоту iframe на 100%?

Вопрос в том, как я могу установить высоту iframe на 100%? Я пробовал разные решения, но все работает. Это мой код:

HTML:

<div id="header_PA"> 
    <div id="menu_PA"> 
    <div id="logo_PA"> 
     <img src="_images/1.png" title="Local PA" id="logo"> 
    </div> 
    <div id="sections_PA"> 
      ... 
     </div> 

    <div id="user_box"> 
     ... 
    </div> 
    </div> 

    <div id="sub_menu_PA"> </div> 
</div> 

<iframe id="iframe_PA" src="_local_pa/dashboard.php" ></iframe>   

<div class="smallFooter"> 
    ... 
</div> 

CSS:

#header_PA{ 
    position: fixed; 
    width: 100%; 
    height: 70px; 
    z-index: 999; 
} 

#iframe_PA{ 
    width: 100%; 
    height: 100%; 
    margin-top: 73px; 
} 

.smallFooter { 
    background: #121212; 
} 

Я пропустил ненужные части HTML и CSS кода.

В результате этого, вы можете увидеть в этой картине:

Screen Capture

Видимо ширина работает свойство, но высота нет. Кто-нибудь знает, как я могу это решить?

Заранее благодарен!

ответ

0

Вам нужно немного JavaScript, чтобы отрегулировать высоту элемента IFRAME.

это работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>auto iframe height adjust</title> 
<style> 



</style> 
<script type="text/javascript"> 
<!--// 
function sizeFrame() { 
var F = document.getElementById("myFrame"); 
if(F.contentDocument) { 
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome 
} else { 



F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome 

} 

} 

window.onload=sizeFrame; 

//--> 
</script> 
</head> 
<body> 


<iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0"> 
An iframe capable browser is 
required to view this web site. 
</iframe> 
</body> 
</html> 

Оригинальный источник: http://w3schools.invisionzone.com/index.php?s=59fbfe0376deb43204ffff5aaf04736f&showtopic=26417#entry145317

+0

Спасибо! Вы дали мне эту идею, я немного изменил сценарий, потому что эти инструкции: 'F.contentDocument.documentElement.scrollHeight + 30;' и 'F.contentWindow.document.body.scrollHeight + 30;' не дают высоту должным образом, меньше в моем случае. Вместо этого сценария я использовал этот: [link] (http://webintenta.com/obtener-el-tamano-de-la-ventana-del-navegador-o-viewport-con-javascript.html) – Yonirt

1

Попробуйте этот код, чтобы установить ширину и высоту Iframe,

<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe> 
Смежные вопросы