gpt4 book ai didi

html - 如何让 iframe 自动改变高度?

转载 作者:行者123 更新时间:2023-11-28 08:14:33 25 4
gpt4 key购买 nike

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

这是我的 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 高度?我只是想让它看起来不错。感谢您的帮助。

最佳答案

我正在从 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>

关于html - 如何让 iframe 自动改变高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29066113/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com