如何让 iframe 自动改变高度？

Question

首先，我知道有很多这样的问题。我读了很多，但没有帮助。

这是我的 html:

<!DOCTYPE html>  
<html class="bg3">    
<head>
<title>Foto's</title>
<link rel="stylesheet" href="style.css">
<script>
function go(loc){
var iframe = document.getElementById("iframe");  
iframe.style.display="block";
document.getElementById('iframe').src = loc;}
</script>
</head>
<body style="width:90%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;">
<br>
<div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
<br>
<div id="menu2"><ul><li><a onclick="go('camera/1993-1994.html')">1993-1994</a></li><li><a onclick="go('camera/1994-2003.html')">1994-2003</a></li><li><a onclick="go('camera/2003-2004.html')">2003-2004</a></li><li><a href="contact.html">2005-2006</a></li><li><a href="index.html">2006-2007</a></li><li><a href="index.html">2007-2008</a></li><br><li><a href="index.html">2008-2009</a></li><li><a href="index.html">2009-2010</a></li><li><a href="index.html">2010-2011</a></li><li><a href="index.html">2011-2012</a></li><li><a href="index.html">2012-2013</a></li><li><a href="index.html">2013-2014</a></li><li><a href="index.html">2014-2015</a></li></ul></div>
<br>
<iframe onload="autoResize('iframe')" id="iframe" src="about:blank" style="width: 95%;height:100%;margin-left:auto;margin-right:auto;">
</body>
</html>

这是我的 css:

.red {border-style:outset;border-width:5px;border-color:#FF0000;background-color:rgba(255,255,255,1);}
.yellow {border-style:outset;border-width:5px;border-color:#FFFF00;background-color:rgba(255,255,255,1);}
.green {border-style:outset;border-width:5px;border-color:#00FF00;background-color:rgba(255,255,255,1);}
.blue {border-style:outset;border-width:5px;border-color:#0066FF;background-color:rgba(255,255,255,1);}

.bg1 {background-image:url(files/bg1.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg2 {background-image:url(files/bg2.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg3 {background-image:url(files/bg3.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg4 {background-image:url(files/bg4.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}
.bg5 {background-image:url(files/bg5.jpg);background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:cover;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}
.font3 {font-family:calibri;font-size:20px;}

.trans {opacity:0.75;}
.trans:hover {opacity:1;}

#iframe {display:none;}

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

html, body{cursor: url(files/cursor.cur), progress !important;Height: 100%;}
table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

我正在努力制作一个漂亮的照片页面，但这种情况往往会发生：

有没有办法自动调整iframe或者增加body高度？我只是想让它看起来不错。感谢您的帮助。

Answer 1

我从 here 那里得到答案，因为这是一个非常相似的案例。

<div>
<iframe id='iframe' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
    width: 100%; position: absolute;" height="100%" width="100%"></iframe>
</div>

Answer 2

我自己已经找到了答案。抱歉打扰了。不过，我仍然感谢您的帮助，并且我想学习其他的方法来做到这一点。总能派上用场。

我所要做的就是将 css 中的 body 和 html 高度更改为 110%。

如何让 iframe 自动改变高度？

How to make an iframe change height automatically?

html

css

iframe

background