根据内容自动调整iframe高度

时间:2017-04-15 05:25:35

标签: html iframe

我是html的新手。我尝试了很多关于调整iframe大小的代码。但是任何代码都没有对我的项目起作用。我正在使用Dreamweaver和xhtml 1.0。我在我的索引网页(index.html)中包含了iframe。现在我想在iframe中打开主页(Home.html),Services.html等。 home.html和其他页面在iframe中打开,但iframe根据这些页面的内容不会调整大小。如果有人知道,请提供工作代码。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Pink Maid Beauty Salon | Home</title>
</head><link rel="stylesheet" href="Style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("navigationbar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

<body>

<!--Background-->
<div class="body">

<!--Header-->
<div id="header"></div>

<!--Logo-->
<div id="logo"></div>

<!--Menu-->
<div id="menu">
  <ul>
    <li>
      <h2><a href="#home">Sign Up <i class="fa fa-user-plus" aria-hidden="true"></i></a></h2>
    </li>
    <li>
      <h2><a href="#news">Login <i class="fa fa-sign-in" aria-hidden="true"></i></a></h2>
    </li>
    <li>
      <h2><a href="#contact">Cart <i class="fa fa-shopping-cart" aria-hidden="true"></i></a></h2>
    </li>
  </ul>
</div>

<!--Navigation-->
<div id="navigation">
  <ul id="navigationbar" class="MenuBarHorizontal">
    <li><a href="Home.html" target="content">Home</a></li>
    <li><a href="Services.html" target="content">Services</a></li>
    <li><a href="Gallery.html" target="content">Gallery</a></li>
    <li><a href="About Us.html" target="content">About Us</a></li>
    <li><a href="Contact Us.html" target="content">Contact Us</a></li>
  </ul>
</div>

<!--Content-->
<iframe src="Home.html" name="content" frameborder="0">
</iframe>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

这不是一个应该如此简单的问题。我写了一个js lib来解决你可能觉得有用的问题。

https://github.com/davidjbradshaw/iframe-resizer