0

首先，对不起我的英语我还在学习，所以我会尽力解释自己。

我的问题是，如何将 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 代码中不必要的部分。

结果，您可以在这张图片中看到它：

屏幕截图

显然宽度属性有效，但高度没有。有谁知道我该如何解决？

提前致谢！

4

2 回答 2

1

试试这个代码来设置 iframe 的宽度和高度，

<iframe src="_local_pa/dashboard.php" width="100%" height="200"></iframe>
于 2013-08-09T05:46:19.163 回答
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

于 2013-08-09T05:49:43.240 回答