iFrame高度自动（CSS） [英] iFrame Height Auto (CSS)
问题描述
我的iframe有问题。我真的想让框架根据iframe中的内容自动调整高度。我真的想通过CSS没有javascript这样做。
I am having problems with my iframe. I really want the frame to auto adjust heights according to the content within the iframe. I really want to do this via the CSS without javascript. However, I will use javascript if I have too.
我尝试过 height：100％; code> height：auto; 等等。我只是不知道还要尝试什么！
I've tried height: 100%; and height: auto;, etc. I just don't know what else to try!
对于框架...
#frame {
position: relative;
overflow: hidden;
width: 860px;
height: 100%;
}
然后是框架的页面。
#wrap {
float: left;
position: absolute;
overflow: hidden;
width: 780px;
height: 100%;
text-align: justify;
font-size: 16px;
color: #6BA070;
letter-spacing: 3px;
}
页面的编码看起来像这样...
The page's coding looks like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" �� "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<a href="/" class="navigation">home</a>
<a href="about.php" class="navigation">about</a>
<a href="fanlisting.php" class="navigation">fanlisting</a>
<a href="reasons.php" class="navigation">100 reasons</a>
<a href="letter.php" class="navigation">letter</a>
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
请注意，iframe中的网址与iframe显示的网站不同。
Please note that the URL within the iframe is different then the website the iframe will be displayed on. However, I have access to both websites.
推荐答案
我遇到了同样的问题，但发现以下效果非常好：
I had this same issue but found the following that works great:
创建响应式YouTube嵌入的关键是使用填充一个容器元素，它允许你给它一个固定的宽高比。
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
下面是一个典型的YouTube嵌入代码的样子，具有固定的宽度和高度：
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
这将是很好，如果我们可以给它一个100％的宽度，但它不工作因为高度保持固定。你需要做的是将它包装在这样的容器（注意类名称和删除的宽度和高度）：
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
并使用以下CSS：
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
on：
https://www.h3xed.com/web-development/how-to-make-a-responsive100-width-youtube-iframe-embed
根据您的长宽比，您可能需要调整 padding-bottom：56.25％; 右边的高度。
Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%; to get the height right.
这篇关于iFrame高度自动（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
